首頁 >web前端 >js教程 >使用jQuery實現動態表格行數自動編號

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

PHPz原創: 2024-02-26 20:03:24829瀏覽

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

在表格中，我們留了一個空的&lt ;td>標籤，用於放置序號。

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

結語

透過上述程式碼範例，我們成功地利用jQuery 實現了表格序號隨著行數增加而自動變化的效果。這樣的功能可以提供使用者更好的數據展示體驗，同時也提高了網頁的互動性。希望這篇文章可以幫助到正在學習前端開發的朋友們，也歡迎大家多多交流學習，共同進步！

以上是使用jQuery實現動態表格行數自動編號的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript jquery css html JS 事件 td

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：掌握jQuery中$符號的作用下一篇：掌握jQuery中$符號的作用

看更多