How can I add delete button into table's row inside script?
Question
I have this code and I want to add delete button in each row of the table but my problem is the table inside the so how I can add delete row ? I want the delete row each row in the table to delete only row that button show in it
<html>
<div id = "data">
<form id = "person">
<br><br>
Name: <select id = "locapavm" name = "pavlocation" >
<option value="rami">rami</option>
<option value="lara">lara</option>
<option value="ahmed">ahmed</option>
</select>
<br><br>
City: <select id="sevepavm" name="pavseverity">
<option value="">- Severity -</option>
<option value="Low">Low</option>
<option value="Medium"> Medium</option>
<option value="High">High</option>
</select>
<br><br>
<textarea id="planpavm" name="pavplan" ></textarea>
<input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">
<input id = "button" type = "button" value = " Add " onclick = "AddData()">
</form>
</div>
<h3>List Of Persons</h3>
<div id = "tab">
<table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
<thead>
<tr>
<td>Name</td>
<td>Seve</td>
<td>plan</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</html>
and this is the script
function AddData(){
var rows = "";
var name = document.getElementById("locapavm").value;
var city = document.getElementById("sevepavm").value;
var plan = document.getElementById("planpavm").value;
rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = "deleterow(id)">Delete</button></td></tr>";
$(rows).appendTo("#list tbody");
}
}
function ResetForm(){
document.getElementById("person").reset();
}
function deleterow(id){
$("#rows-"+id+"").remove();
help me please
2 answers
solution1
2 2019-08-30 14:35:20
You can do this without needing to track id's using the this reference. See my example below. Even better would be to attach the event handlers in Javascript and not inline. Event delegation from the table would be perfect for this. ( $('#list).on('click', '.deleteButton', deleterow); )
function AddData() { var rows = ""; var name = document.getElementById("locapavm").value; var city = document.getElementById("sevepavm").value; var plan = document.getElementById("planpavm").value; rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = deleterow(this)>Delete</button></td></tr>"; $(rows).appendTo("#list tbody"); } function ResetForm() { document.getElementById("person").reset(); } function deleterow(el) { $(el).closest('tr').remove(); }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="data"> <form id="person"> <br><br> Name: <select id="locapavm" name="pavlocation"> <option value="rami">rami</option> <option value="lara">lara</option> <option value="ahmed">ahmed</option> </select> <br><br> City: <select id="sevepavm" name="pavseverity"> <option value="">- Severity -</option> <option value="Low">Low</option> <option value="Medium"> Medium</option> <option value="High">High</option> </select> <br><br> <textarea id="planpavm" name="pavplan"></textarea> <input id="button" type="button" value=" Reset " onclick="ResetForm()"> <input id="button" type="button" value=" Add " onclick="AddData()"> </form> </div> <h3>List Of Persons</h3> <div id="tab"> <table id="list" cellspacing="0px" cellpadding="20px" text-align="center"> <thead> <tr> <td>Name</td> <td>Seve</td> <td>plan</td> </tr> </thead> <tbody> </tbody> </table> </div>
solution2
0 2019-08-30 14:27:28
Two problems:
"</td><td><button onclick="deleterow(id)">Delete</button></td></tr>"
should be
"</td><td><button onclick=deleterow(" + id + ")>Delete</button></td></tr>"
Also, there is no id variable in your function. I would suggest using name as an identifier instead:
"</td><td><button onclick = deleterow(" + name + ")>Delete</button></td></tr>"
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.