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

In web development, it is often necessary to display data tables, and it is hoped that the table number will automatically change as the number of rows increases. The serial number is displayed in one column to facilitate users to locate quickly. In this article, we will use the jQuery library to achieve the effect of the table serial number automatically changing as the number of rows increases.

HTML structure

First, we prepare a simple HTML table structure, as shown below:

<!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="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td></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>

Copy after login

In the table, we left an empty &lt ;td> tag, used to place serial numbers.

JavaScript code

Next, we create a JavaScript file named script.js to write jQuery code to realize the function of automatic change of table serial number.

$(document).ready(function() {
    updateTableIndex();

    // 实现序号自动更新的函数
    function updateTableIndex() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 监听表格行增加的事件
    $('#data-table').on('DOMNodeInserted', 'tbody tr', function() {
        updateTableIndex();
    });
});

Copy after login

In the above code, we first call the updateTableIndex() function to add an initial serial number to the table after the page is loaded. Then use the on() method to listen to the addition event of rows in the table. Once a new row is added, the function to update the serial number will be triggered.

CSS Style

In order to make the table more beautiful, we can also add some simple CSS styles:

body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
}

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

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

Copy after login

Conclusion

Through the above code examples, we Successfully used jQuery to achieve the effect of the table serial number automatically changing as the number of rows increases. Such a function can provide users with a better data display experience and also improve the interactivity of web pages. I hope this article can help friends who are learning front-end development. We also welcome everyone to communicate and learn together to make progress together!

The above is the detailed content of Use jQuery to implement automatic numbering of dynamic table rows. For more information, please follow other related articles on the PHP Chinese website!