jQuery implementation of automatically updating table row numbers-JS Tutorial-php.cn

jQuery implementation of automatically updating table row numbers

PHPz

Release： 2024-02-26 16:06:33

Original

760 people have browsed it

jQuery implementation of automatically updating table row numbers

jQuery is a popular JavaScript library that is widely used in web development. In web development, we often encounter situations where data needs to be displayed, and tables are a common way of displaying data. In a dynamic table, there are often operations such as deletion, addition, sorting, etc. At this time, it is necessary to automatically update the serial numbers in the table when the number of rows in the table changes. The following will introduce in detail how to use jQuery to achieve this function.

The code example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery implementation of automatically updating table row numbers</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
<h1>表格示例</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Charlie</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

<button id="add-row">新增行</button>
<button id="delete-row">删除行</button>

<script>
    // 初始表格序号
    function updateRowNumber() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 新增行
    $('#add-row').on('click', function() {
        $('#data-table tbody').append('<tr><td></td><td>New</td><td>0</td></tr>');
        updateRowNumber();
    });

    // 删除行
    $('#delete-row').on('click', function() {
        $('#data-table tbody tr:last').remove();
        updateRowNumber();
    });
</script>
</body>
</html>

Copy after login

In the above code, a table containing name and age is first created, and a header containing serial number, name and age is added. Then I used jQuery to write two event listeners, respectively for adding rows and deleting rows. Among them, the updateRowNumber function is used to automatically update the serial number in the table when the number of table rows changes. The operations of adding rows and deleting rows will call the updateRowNumber function, thus realizing the automatic update of the serial number when the number of table rows changes.

Through this code example, you can easily implement the automatic update function of the serial number when the number of table rows changes, so that the table can maintain a good display effect when the data changes dynamically.

The above is the detailed content of jQuery implementation of automatically updating table row numbers. For more information, please follow other related articles on the PHP Chinese website!