从html表中动态添加/删除行
[英]Dynamically add/remove rows from html table
问题描述
I am working on a table that can be modified by pressing "Delete" buttons in each row and "Insert row" to add a new one at the end: 
我正在处理一个表，可以通过按每行中的“删除”按钮进行修改，并在“插入行”中添加一个新的结尾：
So far by now my code is: 到目前为止，我的代码是：
<!DOCTYPE html> <html> <head> <script> function deleteRow(id,row) { document.getElementById(id).deleteRow(row); } function insRow(id) { var filas = document.getElementById("myTable").rows.length; var x = document.getElementById(id).insertRow(filas); var y = x.insertCell(0); var z = x.insertCell(1); y.innerHTML = '<input type="text" id="fname">'; z.innerHTML ='<button id="btn" name="btn" > Delete</button>'; } </script> </head> <body> <table id="myTable" style="border: 1px solid black"> <tr> <td><input type="text" id="fname"></td> <td><input type="button" value="Delete" onclick="deleteRow('myTable',0)"></td> </tr> <tr> <td><input type="text" id="fname"></td> <td><input type="button" value="Delete" onclick="deleteRow('myTable',1)"></td> </tr> <tr> <td><input type="text" id="fname"></td> <td><input type="button" value="Delete" onclick="deleteRow('myTable',2)"></td> </tr> </table> <p> <input type="button" onclick="insRow('myTable')" value="Insert row"> </p> </body> </html>
But i cannot attach the function onclick="deleteRow('myTable',0)" on 但我无法附加函数onclick =“deleteRow（'myTable'，0）”
z.innerHTML ='<button id="btn" name="btn"> Delete</button>'
¿Is there something else i need to declare in order to make that button work when clicked? ¿是否还需要声明其他内容以便在单击时使该按钮工作？
Thanks for your answers 谢谢你的回答
4 个解决方案
解决方案1
13 已采纳 2015-01-28 03:42:32
First off, IDs must be unique, so why not use classes here instead? 首先，ID必须是唯一的，那么为什么不在这里使用类呢？
Second, if you're using jQuery, then use jQuery. 其次，如果你正在使用jQuery，那么使用jQuery。
Third, you need to use event delegation when dynamically adding elements, so try the following: 第三，在动态添加元素时需要使用事件委托，因此请尝试以下操作：
$('#myTable').on('click', 'input[type="button"]', function () { $(this).closest('tr').remove(); }) $('p input[type="button"]').click(function () { $('#myTable').append('<tr><td><input type="text" class="fname" /></td><td><input type="button" value="Delete" /></td></tr>') });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="myTable" style="border: 1px solid black"> <tr> <td> <input type="text" class="fname" /> </td> <td> <input type="button" value="Delete" /> </td> </tr> <tr> <td> <input type="text" class="fname" /> </td> <td> <input type="button" value="Delete" /> </td> </tr> <tr> <td> <input type="text" class="fname" /> </td> <td> <input type="button" value="Delete" /> </td> </tr> </table> <p> <input type="button" value="Insert row"> </p>
解决方案2
2 2016-01-25 10:10:31
On each DeleteRow(tableId,Index) function you are passing table id and static index that's why document.getElementById("mytable").deleteRow(Index) first find table node then find no of tr element as children and assigns the index to tr element start from 0 and delete the matching index tr element. 在每个DeleteRow(tableId,Index)函数中，您传递的是表id和静态索引，这就是为什么document.getElementById("mytable").deleteRow(Index)首先找到表节点然后找不到tr元素作为子节点并将索引赋给tr element从0开始并删除匹配的索引tr元素。
Whenever you delete first row then it will matches the 0 index from 3 elements and deletes the first row. 每当您删除第一行时，它将匹配3个元素的0索引并删除第一行。 Now there are 2 tr left with index 0 and 1 dynamically assign by table but you trying to match with 1 and 2. 现在剩下2 tr，索引0和1按表动态分配，但你试图匹配1和2。
for deleting second row it will delete tr with index 1 (third tr) not the second tr. 为删除第二行，它将删除tr索引1（第三个tr）而不是第二个tr。
for deleting third row actual index is 0 (after deleting 2 rows) and you are passing 1 because of this reason it wont find the matching index. 删除第三行实际索引是0（删除2行后），你传递1，因为它不会找到匹配的索引。
Here is Simple javascript soltution. 这是简单的javascript soltution。
<script>
function delRow(currElement) {
var parentRowIndex = currElement.parentNode.parentNode.rowIndex;
document.getElementById("myTable").deleteRow(parentRowIndex);
}
</script>
and html, 和HTML，
<table id="myTable" style="border: 1px solid black">
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
<tr>
<td><input type="text" id="fname"></td>
<td><input type="button" value="Delete" onclick="delRow(this)"></td>
</tr>
</table>
here is jsfiddle exmple 这里是jsfiddle exmple
解决方案3
2 2018-07-01 13:25:06
Say you have the following table: 假设您有下表：
<table id="myTable">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="firstName" /></td>
<td><input type="text" name="lastName" /></td>
<td> <input type="text" name="email" /></td>
</tr>
</tbody>
<p>
<label>Insert</label>
<input type="number" value="1" id="numberOfRowsToInsert">
<input type="button" value="Insert row" id="insert-line-button">
</p>
</table>
The following jquery code will generate x number of rows entered by the user and append them to the bottom of the table with the ability to delete them if needed: 以下jquery代码将生成用户输入的x行数，并将它们附加到表的底部，并能够在需要时删除它们：
$('#insert-line-button').on("click", function(){
var noOfRows = $('#numberOfRowsToInsert').val();
for(var i = 0; i < noOfRows; i++){
$('#myTable').append("<tr>" +
"<td><input type='text' name='firstName' /></td>" +
"<td><input type='text' name='lastName' /></td>" +
"<td> <input type='text' name='email' /></td>" +
"<td><input type='button' value='Delete' id='deleteRowButton' /></td>" +
"</tr>")
}
});
And the following jquery code will remove the rows when clicked on the 'Delete' button: 以下jquery代码将在单击“删除”按钮时删除行：
$("#myTable").on('click', 'input[id="deleteRowButton"]', function(event) {
$(this).parent().parent().remove();
});
解决方案4
0 2019-07-05 11:18:10
Go through below code:
You can see that this is the most basic way to create dynamic table. You can use this approach and can try yourself to remove rows from the existing table. I have not used any pluggin/ jquery. You can just copy this code and save as an html file to see how this code is working. Go head! Good luck.
<html>
<script>
function CreateTableAndRows(){
var mybody = document.getElementsByTagName("body")[0];
var newTable = document.createElement("table");
var newTableHead = document.createElement("thead");
var headRow = document.createElement("tr");
var headHead1 = document.createElement("th");
var headRowCellValue = document.createTextNode("Device Name");
headHead1.appendChild(headRowCellValue);
var headHead2 = document.createElement("th");
headRowCellValue = document.createTextNode("Start Timing");
headHead2.appendChild(headRowCellValue);
var headHead3 = document.createElement("th");
headRowCellValue = document.createTextNode("End Timing");
headHead3.appendChild(headRowCellValue);
var headHead4 = document.createElement("th");
headRowCellValue = document.createTextNode("Duration");
headHead4.appendChild(headRowCellValue);
headRow.appendChild(headHead1);
headRow.appendChild(headHead2);
headRow.appendChild(headHead3);
headRow.appendChild(headHead4);
newTableHead.appendChild(headRow);
newTable.appendChild(newTableHead);
var newTableBody = document.createElement("tbody");
for(var rowCount=0;rowCount<5;rowCount++)
{
var newTableRow = document.createElement("tr");
for(var cellCount=0; cellCount<4; cellCount++)
{
var newTableRowCell = document.createElement("td");
var cellValue = document.createTextNode("cell is row"+rowCount+", coumn "+cellCount);
newTableRowCell.appendChild(cellValue);
newTableRow.appendChild(newTableRowCell);
}
newTableBody.appendChild(newTableRow);
}
newTable.appendChild(newTableBody);
newTable.setAttribute("border","2");
mybody.appendChild(newTable);
}
</script>
</head>
<body>
<input type="submit" onclick="CreateTableAndRows();">
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.