javascript - 使用带行索引和链接的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 来删除行。希望这会有所帮助。