使用带有链接的行索引的javascript动态删除HTML表格行

Question

我想在 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);    

这里的 rowcount 是当前添加的行的索引。因此，在添加行时，我也定义了删除操作。因此，每一行都会有一个删除链接。但是，问题是索引动态变化。所以，这个解决方案不会真正起作用。

请问你能帮忙吗？我不想使用解决方案之一定义的复选框。

删除行函数的脚本如下：

function deleterow(index){
    alert('working' + index);
    table.deleteRow(index);
}

######### 试过这个###########

//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);

“this”指向窗口而不是表格行。

Answer 1

解决方案是将当前行元素传递给 deleteRow 函数并使用其父元素将其删除（不能直接删除它），因此函数将如下所示：

 var deleteRow = function (link) {
     var row = link.parentNode.parentNode;
     var table = row.parentNode; 
     table.removeChild(row); 
 }

删除链接的 HTML 如下

<a onclick="javascript:deleteRow(this); return false;">

使用以下行动态创建元素（也注意大写和小写字符）：

element7.setAttribute("onclick","deleteRow(this); return false");

因此，不需要使用 ID 来删除行。希望这会有所帮助。