How does jquery realize that the table serial number changes with the automatic addition of rows?

The jquery method to realize the table serial number changing with the automatic addition of rows is: 1. Create an html file and introduce the jQuery file; 2. Use the "table" tag to create a table with the id value "myTable"; 3. jQuery The "DataTables" plug-in is used in the code to manage the table; 4. Then listen to the add row event and delete row event, and call the `draw(false)` method to draw, and then use `updateRowIds` to update the serial number.

Operating system for this tutorial: Windows 10 system, jQuery3.6.0 version, Dell G3 computer.

The way jquery implements the table serial number to change with the automatic addition of rows is:

HTML code:

<table id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

jQuery code:

$(document).ready(function() {
    var table = $('#myTable').DataTable();
    // 监听添加行事件
    $('#addRowBtn').on('click', function() {
        table.row.add([
            '', // 空序号，插入后由函数进行自动编号
            '',
            ''
        ]).draw(false);
        updateRowIds();
    });
    // 监听删除行事件
    $('#myTable tbody').on('click', '.deleteRowBtn', function() {
        table
            .row($(this).parents('tr'))
            .remove()
            .draw();
        updateRowIds();
    });
    // 更新序号字段值
    function updateRowIds() {
        $('#myTable tbody tr').each(function(index, row) {
            $(row).find('td:first-child').text(index + 1);
        });
    }
});

First, in HTML , we have a table with ID `myTable`, which contains three columns: ID, Name and Age.

In the jQuery code, we use the DataTables plug-in to manage tables. In the `ready` function, we initialize the DataTables instance and store it in the `table` variable.

Then, we listened to the add row event and delete row event. When the user clicks the add button, we will add a row to the DataTables instance and immediately call the `draw(false)` method to draw (the parameter false passed in when running this method means that the table will not be rearranged), and then use `updateRowIds `Just update the serial number.

The above is the detailed content of How does jquery realize that the table serial number changes with the automatic addition of rows?. For more information, please follow other related articles on the PHP Chinese website!