Question

我试图用jQuery删除从数据表中选择id="data(Number)"的行如何。这是可能的，或者id会更好<tr>代码，而不是<td>代码？

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th>Check</th>
            <th>Field_1</th>
            <th>Field_2</th>
            <th>Field_3</th>
        </tr>
    </thead>
    <tbody id="dataTable">
        <tr>
            <td><input type='checkbox' id='data1'><br></td>
            <td>Field_1_Input1</td>
            <td>Field_2_Input1</td>
            <td>Field_3_Input1</td>
        </tr>
        <tr>
            <td><input type='checkbox' id='data2'><br></td>
            <td>Field_1_Input2</td>
            <td>Field_2_Input2</td>
            <td>Field_3_Input2</td>
        </tr>
    </tbody>
</table>

Answer 1

尝试：

 function removerow(number){
    $('#data'+number).closest('tr').remove();
}

然后您可以调用示例removerow(2)来删除包含id=data2

的输入元素的行

DEMO

更新（来自评论）

要使用td获取行中的$("#data"+i)元素，请尝试：

$('#data' + number).parent().siblings().each(function () {
        console.log($(this).text());
});

DEMO2

Answer 2

尝试以下方法 -

首先获取dataTable实例

var oTable = $（'＃table_id'）。dataTable（）;

调用以下函数删除与所选

oTable.fnDeleteRow（oTable.fnGetPosition（selected_tr））; // JQuery dataTable 函数从表中删除行

Answer 3

这是一个例子： -

 var table = $('#example').DataTable();

  $('#example tbody').on( 'click', 'img.icon-delete', function () {
    table
        .row( $(this).parents('tr') )
        .remove()
        .draw();
} );

Answer 4

是的，你可以使用这个seletor :eq(n)

function deleteRow(number)
{
     $("tbody tr:eq(" + number")").remove();
}

这将从0开始删除选择了哪个数字的行。

Answer 5

使用数据表API易于使用，如果您使用的是paging等，则可以提供帮助。一旦删除行，这将更新文档的页数。

// datatable intitalization.

$('#userInfo').DataTable({
        'paging': true,
        'lengthChange': true,
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        'searching': true,
        'info': true,
        'autoWidth': true,
        'stateSave': true,
        'ordering': true,
        'deferRender': true,
        columnDefs: [
            { targets: [4], orderable: false }
        ]
    });

    // function to remove datatable row.
    function RemoveDatatableRow(rowId){
       var row = $("#" + rowId);
       $("#userInfo").dataTable().fnDeleteRow(row);        
    }

Answer 6

tableID = $('#dataTableInfoUser');
    var table = tableID.DataTable().rows().nodes();
    var rowCount = table.length;

    for (var i = 0; i < rowCount; i++) {
        var row = tableID.DataTable().row(i).node();
        var chkbox = row.cells[0].childNodes[0];
        if (null != chkbox && true == chkbox.checked) {
            tableID.dataTable().fnDeleteRow(i); 
            rowCount--;
        }
    }

从数据表中删除一行

6 个答案: