自动更新表格行号的jQuery实现

WEB前端
5月3日
编辑

站长知名站长

jQuery是一个流行的JavaScript库，广泛应用于网页开发中。在网页开发中经常会遇到需要展示数据的情况，而表格是一个常用的数据展示方式。在一个动态表格中，经常会有删除、新增、排序等操作，这时候就需要实现当表格行数发生变化时，自动更新表格中的序号。下面将具体介绍如何利用jQuery来实现这一功能。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实现表格行数变化时自动更新序号</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>

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。