Question

I have two data tables. One is the "Selection Table", which has a column with a checkbox. When this checkbox is checked, the row data is added to the "Preview Table". When the checkbox is unchecked, it should remove the row from the Preview table.

My problem is that the unchecking from the box actually gets rid of "all" the rows in the Preview Table.

$('#selectNodesTable tbody').on('click', 'tr #nodeToAdd', function () {
        var row = ($(this)).closest('tr');
        var rowObj = nodeTable.row(row).data();
        console.log(rowObj);

        if (($(this)).is(':checked')) {
            nodePreviewTable.row.add(rowObj);
            nodePreviewTable.draw();
        } else {
            // THE BELOW STATEMENT DELETES ALL ROWS FROM THE PREVIEW TABLE
            nodePreviewTable.row().remove(rowObj);
            nodePreviewTable.draw();
        }
    });

Answer 1

你想要的并不完全清楚。但我假设你想根据点击复选框来回移动两个jQuery dataTables实例行？如果您有两个表#selectNodesTable和#previewNodesTable，则可以在选中 #selectNodesTable {的复选框后移动一行{1}}这样：

#previewNodesTable

注意$('#selectNodesTable').on('click', 'input[type=checkbox]', function() { if ($(this).is(':checked')) { $(this).attr('checked', 'checked'); tr = $(this).closest('tr'); row = selectNodesTable.row(tr); rowData = []; tr.find('td').each(function(i, td) { rowData.push($(td).html()); }); row.remove().draw(); previewNodesTable.row.add(rowData).draw(); } });的重生。这是为了确保您传递一个实际选中的复选框。 rowData只返回缓存的行内容，即未选中的复选框。如果你也想做对立，我假设：

row.data()

参见演示 - ＆gt; http://jsfiddle.net/zwLm043e/

上述内容当然可以很容易地推广到单个函数中，根据单击复选框的状态执行这两个操作。

Datatables remove row from another table

1 个答案: