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

我想在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是当前添加行的索引。因此，在添加行的同时，我还定义了delete操作。因此，每一行都有一个删除链接。然而，问题是索引是动态变化的。因此，这个解决方案不会真正起作用

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

删除行函数的脚本如下所示：

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”指向窗口，而不是表行

解决方案是将当前行元素传递给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;">

---

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

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

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

    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>

删除链接的HTML如下

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

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

根据阿迪蒂亚·谢奇的说法，请自己使用。你可以在这里看到壁橱的定义：http://api.jquery.com/closest/
    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>

以下是一个例子：
检查
$（函数（）{
$（“.addButton”）。单击（函数（）{
$（this）.clone（true）.appendTo（“#foo”）；
});
$（“.deleteButton”）。单击（函数（）{
$（this）.tr.remove（）；
});
});

根据Aditya Shedge的说法，使用最接近自身的方法。你可以在这里看到壁橱的定义：http://api.jquery.com/closest/
以下是一个例子：
检查
$（函数（）{
$（“.addButton”）。单击（函数（）{
$（this）.clone（true）.appendTo（“#foo”）；
});
$（“.deleteButton”）。单击（函数（）{
$（this）.tr.remove（）；
});
});

不要使用该行的索引。这在很多方面都是错误的。假设您删除了前3个单元格，而您的索引已更改。如果要删除第4行，它实际上会删除实际表中的第7行，而不是第4行

在中添加一个“数据id”字段，该字段的每一行都有一个唯一的id。 使用此选项删除该行

更好的解决方案： 这在jQuery中，因此请查找与js原型等效的内容

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

---

$（这）是你点击的按钮。因此，对于按钮的“单击”事件，执行与上述js等效的操作。

不要使用该行的索引。这在很多方面都是错误的。假设您删除了前3个单元格，而您的索引已更改。如果要删除第4行，它实际上会删除实际表中的第7行，而不是第4行

在中添加一个“数据id”字段，该字段的每一行都有一个唯一的id。 使用此选项删除该行

更好的解决方案： 这在jQuery中，因此请查找与js原型等效的内容

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

---

---

$（这）是你点击的按钮。因此，对按钮的“单击”事件执行与上述类似的js操作。

为每个表行指定一个唯一的Id，并使用该Id删除该行。否则，您可以将父行而不是特定的数字传递到函数中。例如，请。。我正在插入一行代码：var row=table.insertRow（rowCount）；我可以建议你开始对你得到的一些答案进行投票吗？：）为每个表行指定一个唯一的Id，并使用该Id删除该行。否则，您可以将父行而不是特定的数字传递到函数中。例如，请。。我正在插入一行代码：var row=table.insertRow（rowCount）；我可以建议你开始对你得到的一些答案进行投票吗？：）谢谢你的回复。然而，“这”并没有通过。它的窗户。。现在是行定义..我的错误是，根本不考虑表。这个代码有效。var deleteRow=function（link）{var row=link.parentNode.parentNode；var table=row.parentNode；table.removeChild（row）；}对不起，我没有得到它。请编辑答案好吗？我通过javascript动态添加表。编辑注释。在href上使用onclick属性。这可能会有帮助。谢谢你的回复。然而，“这”并没有通过。它的窗户。。现在是行定义..我的错误是，根本不考虑表。这个代码有效。var deleteRow=function（link）{var row=link.parentNode.parentNode；var table=row.parentNode；table.removeChild（row）；}对不起，我没有得到它。请编辑答案好吗？我通过javascript动态添加表。编辑注释。在href上使用onclick属性。这可能会有帮助。什么是最接近的意思？在jQuery中，最接近的给出了DOM层次结构中的第一个元素，该元素包含您调用的最接近的元素。最接近的意思是什么？在jQuery中，最接近的元素提供DOM层次结构中的第一个元素，该元素具有您调用的最接近的元素。