javascript 使用带有链接的行索引的javascript动态删除HTML表格行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21043622/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Delete HTML table row dynamically using javascript with row index with link
提问by Hariprasauth Ramamoorthy
I wanted to dynamically add/delete table rows in HTML. I know there are quite a lot of questions in this forum with similar query. My doubt is to make the delete action applicable for each of the rows. For this, I was using the table index.
我想在 HTML 中动态添加/删除表格行。我知道这个论坛中有很多类似的问题。我的疑问是使删除操作适用于每一行。为此，我使用了表索引。
//Link
var cell7 = row.insertCell(6);
var element7 = document.createElement("a");
var text = document.createTextNode("Delete");
element7.appendChild(text);
element7.setAttribute("href","javascript:deleterow("+rowcount+")");
element7.name="reqlink[]";
cell7.appendChild(element7);
Here rowcount is the index of the currently added row. So, while adding the row, I define the delete action as well. So, there will be a delete link for each of the row. However, the problem is the index varies dynamically. So, this solution will not really work.
这里的 rowcount 是当前添加的行的索引。因此，在添加行时，我也定义了删除操作。因此，每一行都会有一个删除链接。但是，问题是索引动态变化。所以，这个解决方案不会真正起作用。
Please can you help? I dont want to use the check box as defined by one of the solution.
请问你能帮忙吗？我不想使用解决方案之一定义的复选框。
The delete row function is scripted as follows:
删除行函数的脚本如下：
function deleterow(index){
alert('working' + index);
table.deleteRow(index);
}
######### Tried this ###########
######### 试过这个###########
//Link
var cell7 = row.insertCell(6);
var element7 = document.createElement("a");
var text = document.createTextNode("Delete");
element7.appendChild(text);
element7.setAttribute("href","javascript:deleterow(this); return false");
element7.name="reqlink[]";
cell7.appendChild(element7);
The "this" points to window and not the table row..
“this”指向窗口而不是表格行。
回答by Vlad
Solution is to pass the current row element to the deleteRow function and remove it using its parent element(you can not remove it directly), so function will look like this:
解决方案是将当前行元素传递给 deleteRow 函数，并使用其父元素删除它（不能直接删除它），因此函数将如下所示：
var deleteRow = function (link) {
var row = link.parentNode.parentNode;
var table = row.parentNode;
table.removeChild(row);
}
HTML for delete link is following
删除链接的 HTML 如下
<a onclick="javascript:deleteRow(this); return false;">
Use following line to create element dynamically(also be careful with uppercase and lowercase characters):
使用以下行动态创建元素（也注意大写和小写字符）：
element7.setAttribute("onclick","deleteRow(this); return false");
So, using ID's for deleting rows is unnecessary. Hope this will help.
因此，不需要使用 ID 来删除行。希望这会有所帮助。
回答by Aditya Shedge
dont use index of the row. it is wrong on so many levels. imagine u deleted 1st 3 cells and your index has changed. if you want to delete the 4th row it will actually delete 7th row instead of 4th row in your actual table.
不要使用行的索引。在很多层面上都是错误的。想象你删除了第一个 3 个单元格并且你的索引发生了变化。如果要删除第 4 行，它实际上会删除实际表中的第 7 行而不是第 4 行。
add a "data-id" field in your which has a unique id for every row. use this to delete the row.
在您的每行中添加一个“data-id”字段，该字段具有唯一的 id。使用它来删除行。
BETTER SOLUTION: this is in jQuery so find the js prototype equivalent.
更好的解决方案：这是在 jQuery 中，所以找到等效的 js 原型。
$(this).closest("tr").html("")
and $(this) is your button which is clicked. so do the js equivalent of the above for 'click' event of the button.
$(this) 是您点击的按钮。按钮的“单击”事件的 js 等价物也是如此。
回答by logan Sarav
according to Aditya Shedge use closest itself. u can see closet definition here: http://api.jquery.com/closest/
here is an example:
<table id="foo" border="1">
<tr>
<td>check</td>
<td><input type="text></td>
<td><input type="text></td>
<td><input type="button" class="addButton" value="add"/></td>
<td><input type="button" class="deleteButton" value="delete"/></td>
</tr>
</table>
<script>
$(function(){
$(".addButton").click(function(){
$(this).closest("tr").clone(true).appendTo("#foo");
});
$(".deleteButton").click(function(){
$(this).closest("tr").remove();
});
});
</script>
