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来删除行是不必要的。希望这会有所帮助。

Answer 2

不要使用行的索引。这么多级别都是错的。想象你删除了前3个单元格，你的索引已经改变了。如果你想删除第4行，它实际上会删除实际表格中的第7行而不是第4行。

在您的每个行中添加一个“data-id”字段，该字段具有唯一ID。用它来删除行。

更好的解决方案：这是在jQuery中，所以找到js原型等价。

$(this).closest("tr").html("")

和$（this）是您单击的按钮。对于按钮的“click”事件，js等效于上面的内容。

Answer 3

    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>

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

3 个答案: