Question

我有datatable。每一行都有一个Delete button。只要我使用.remove()函数删除一行，相应的行就会被删除，但在点击Save button之后，删除的行下面的行将被取消定义。

以下是示例代码：

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>

JS：

$(document).ready(function() {
var i =0;
$('#example').dataTable({ 
            "aoColumns": [
                            null, { "bSortable": false }
                        ],
            "aaSorting": [],
            "pageLength": 10,
            "lengthMenu": [5, 10, 25, 50, 100, 200]

        });    

$('#btnSave').click(function(){ 
var tbl = $('#example').dataTable();
$(tbl.fnGetNodes()).each(function () { 

            alert($(this).find("#name_" + i).val());
            i++;
            });

    });
});

function del(element)
{
    var btnId = element.id;
    var idIndex = btnId.substring(btnId.indexOf("_") + 1);
    var table = $('#example').DataTable();
    table.row($($("#btn_" + idIndex)).parents('tr')).remove().draw();
}

这是一个不起作用的Demo。

如何删除行然后单击Save button，删除行下方的行不应该是未定义的。

任何帮助都将不胜感激。

Answer 1

这是因为删除行后，行索引与INPUT元素的ID不匹配。

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

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

请参阅updated jsFiddle以获取代码和演示。

Answer 2

  $(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();
    }

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

2 个答案: