Javascript 删除行后，删除行下的DataTables行将未定义_Javascript_Jquery_Html_Datatables

Javascript 删除行后，删除行下的DataTables行将未定义

javascript jquery html datatables

Javascript 删除行后，删除行下的DataTables行将未定义,javascript,jquery,html,datatables,Javascript,Jquery,Html,Datatables,我有一个数据表。每行上都有一个删除按钮。使用.remove（）函数删除一行后，相应的行将被删除，但随后单击保存按钮，删除行下方的行将被取消定义以下是示例代码： HTML <body> <form method="POST"></form> <div class="container"> <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="

我有一个

数据表

。每行上都有一个

删除按钮

。使用

.remove（）

函数删除一行后，相应的行将被删除，但随后单击

保存按钮

，删除行下方的行将被取消定义

以下是示例代码：

HTML

<body>
<form method="POST"></form>
<div class="container">      
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
   <thead>
        <tr>
            <th>Name</th>
            <th>Delete</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td><input type ="text" id="name_0" value ="hello0"/></td>
           <td><button id="btn_0" onclick="del(this);">Delete</button></td>
        </tr>
        <tr>
            <td><input type ="text" id="name_1" value ="hello1"/></td>
            <td><button id="btn_1" onclick="del(this);">Delete</button></td>
        </tr>
        <tr>
            <td><input type ="text" id="name_2" value ="hello2"/></td>
            <td><button id="btn_2" onclick="del(this);">Delete</button></td>
        </tr>
        <tr>
            <td><input type ="text" id="name_3" value ="hello3"/></td>
            <td><button id="btn_3" onclick="del(this);">Delete</button></td>
        </tr>

    </tbody>
</table>

<input type="button" value="Save" id="btnSave"/>
</div>
</body>

这里有一个不工作的人

如何删除一行，然后单击

保存按钮

，删除行下方的行不应未定义

任何帮助都将不胜感激。

这是因为删除行后，行索引和输入元素的ID之间不匹配

短期解决方法是使用以下代码：

alert($(this).find("input[type=text]").val());

有关代码和演示，请参阅。

发生这种情况是因为删除行后，行索引和输入元素的ID不匹配

  $(document).ready(function () {
        $('#btnSave').click(function () {
            $('#example tbody tr').each(function () {
                alert($(this).find("td:eq(0)").find('input').val());
            });
        });
    });

    function del(element) {
        $(element).closest('tr').remove();
    }

短期解决方法是使用以下代码：

alert($(this).find("input[type=text]").val());

有关代码和演示，请参阅

  $(document).ready(function () {
        $('#btnSave').click(function () {
            $('#example tbody tr').each(function () {
                alert($(this).find("td:eq(0)").find('input').val());
            });
        });
    });

    function del(element) {
        $(element).closest('tr').remove();
    }