Home >Web Front-end >JS Tutorial >Use jQuery to implement dynamically increasing table serial numbers

Use jQuery to implement dynamically increasing table serial numbers

WBOYOriginal: 2024-02-26 19:51:331298browse

Use jQuery to realize that the table serial number automatically increases as the number of rows changes

In web development, we often encounter situations where we need to add serial numbers to tables. If the number of rows in the table changes frequently, you need to dynamically adjust the serial numbers in the table, and jQuery can easily achieve this function. This article will introduce how to use jQuery to achieve the effect of automatically increasing the serial number in the table as the number of rows changes, and attach specific code examples.

First, we need to create a table in the HTML file and add a cell containing a serial number to each row of the table to display the serial number. The code 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>表格序号随行数变化自动增加</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="myTable">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="index"></td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td class="index"></td>
            <td>李四</td>
            <td>25</td>
        </tr>
        <tr>
            <td class="index"></td>
            <td>王五</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

In the above code, we defined a simple table, including three columns: serial number, name and age, and added a class name to the serial number cellindex, used for selection in jQuery.

Next, we create a JavaScript file script.js to write jQuery code to implement the function of automatically increasing the serial number as the number of lines changes. The code is as follows:

$(document).ready(function() {
    $("#myTable tbody tr").each(function(index) {
        $(this).find(".index").text(index + 1);
    });

    $("#myTable").on("DOMNodeInserted", function() {
        $("#myTable tbody tr").each(function(index) {
            $(this).find(".index").text(index + 1);
        });
    });

    $("#myTable").on("DOMNodeRemoved", function() {
        $("#myTable tbody tr").each(function(index) {
            $(this).find(".index").text(index + 1);
        });
    });
});

In the above code, we first traverse each row in the table through the each method after the page is loaded, and assign the corresponding sequence number to the cell. Serial number value. Then, listen to the insertion and deletion events of rows in the table through the on method. If the number of rows in the table changes, the value of the serial number cell in each row will be readjusted to ensure that the serial number can automatically increase as the number of rows changes. .

Finally, save the above code to the script.js file in the same directory, and introduce the jQuery library and the JavaScript file into the HTML file, so that the table serial number changes with the number of rows. Automatically increase the effect.

Through the above implementation, we can easily implement the function of automatically increasing the serial number in the table as the number of rows changes, providing a better user experience and data display effect for the web page.

The above is the detailed content of Use jQuery to implement dynamically increasing table serial numbers. For more information, please follow other related articles on the PHP Chinese website!

JavaScript jquery html JS 事件

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：An in-depth discussion of jQuery event binding technologyNext article：An in-depth discussion of jQuery event binding technology

See more

Use jQuery to implement dynamically increasing table serial numbers

Related articles