使用jQuery實現動態表格行數自動編號

發布時間：2024-03-08 21:58:44 作者：網友整理

利用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>

登錄后復制

在表格中，我們留了一個空的

標簽，用于放置序號。

JavaScript代碼

接下來，我們創建一個名為script.js的JavaScript文件，用來編寫 jQuery 代碼來實現表格序號自動變化的功能。

$(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();
    });
});

登錄后復制

以上代碼中，我們首先在頁面加載完成后調用updateTableIndex()函數來為表格添加初始的序號。然后使用on()方法來監聽表格中行的增加事件，一旦有新的行被添加，便會觸發更新序號的函數。

CSS樣式

為了讓表格更美觀，我們還可以添加一些簡單的CSS樣式：

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;
}

登錄后復制