Question

在jquery数据表中，我在单击按钮时动态添加行。但是，添加新行时，如果表中存在类似的行，则应自动删除。

假设在数据表中我有以下数据。

第1行：A B C D. 第2行：P Q R S. 第3行：U V W X

现在我要添加一个新的，如下所示。

Row4：P Q R S

但是这个新的已存在于数据表中，因此在添加这个新数据时应该自动删除现有的那个。您可能会想到为什么我们需要再次添加相同的一个。因为，虽然它看起来像表中的相同，但它在数据库中是不同的。

有人可以帮助我达到这个要求。

Answer 1

这是一个工作fiddle，可以动态添加行，如果在添加之前已经存在，则删除。

<强> HTML

<!-- INDEX TO ADD ON THE DATATABLE -->
<select id="recIndex">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
</select>
<!-- BUTTON TO ADD ROW -->
<input type="button" name="addRow" value="Add Row">

<!-- DATATABLE -->
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>No #</th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>No #</th>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </tfoot>
    </table>

<强> JS

在下面的代码中，我通过检查每行的第一个TD值来检查DataTable中是否存在记录。如果提供的索引计数器值在第一个TD中，那么我假设已经存在。然后我添加了一个.remove类来删除该行。希望你明白我的意思。

$(document).ready(function() {
    var $myTable = $('#example');
    var t = $myTable.DataTable();

    $('input[name="addRow"]').click(function() {
        var index = $('#recIndex').val();
        addRow(index);
    });

    function addRow(counter) {
        // Check if the counter record is already exist in DataTable
        // TODO: Check and provide functionality as per your requirements. Below code is done just for an example. 
        $myTable.find('tr').each(function() {
            if($(this).find('td:first').html() == counter) {
                $(this).addClass('remove'); // If you found the counter add .remove class
            }
        });

        // Delete row by using remove class and draw
        t.row('.remove').remove().draw( false );

        // Add new row as per index counter
        t.row.add( [
            counter,
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw( false );
    }
} );

Answer 2

$(document).ready(function () {
    $('#add-new-button').on('click',function(){
        var rData = [
            test1,
            test1,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
         $('#dataTable').DataTable().row.add(rData).draw(false);
    });

   $('#dataTable').on('click', '.update', function () {
        var pageParamTable = $('#dataTable').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        var rData = [
            test1,
            test1,
            '<a href="#" data-href="' + response.result[0].id + '" class="update">Update</a>',
            '<a href="#" data-href="' + response.result[0].id + '" class="delete">Delete</a>'
        ];
        pageParamTable
                .row( tableRow )
                .data(rData)
                .draw();
    });
    $('#dataTable').on('click', '.delete', function () {
       var pageParamTable = $('#page-params').DataTable();
        var tableRow = pageParamTable.row($(this).parents('tr'));
        pageParamTable.row( tableRow ).remove().draw();
    });
});

我在我们的项目中使用此代码，它可以使用，您可以使用此

在jquery数据表中动态添加和删除行

2 个答案: