使用jQuery实现动态表格行数自动编号

加入会员，下载所有会员模板! 广告

站长知名站长

利用jQuery实现表格序号随着行数增加而自动变化

在网页开发中，常常需要展示数据表格，并且希望在表格每一行的第一列显示序号，以方便用户快速定位。在这篇文章中，我们将利用jQuery库来实现表格序号随着行数增加而自动变化的效果。

HTML结构

首先，我们准备一个简单的HTML表格结构，如下所示：

<!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>

给TA打赏