自動更新表格行號的jQuery實現-js教程-PHP中文網

自動更新表格行號的jQuery實現

PHPz

發布： 2024-02-26 16:06:33

原創

706 人瀏覽過

自動更新表格行號的jQuery實現

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>

登入後複製

在上面的程式碼中，首先建立了一個包含姓名和年齡的表格，並新增了一個包含序號、姓名和年齡的表頭。接著用jQuery編寫了兩個事件監聽器，分別用於新增行和刪除行。其中，透過updateRowNumber函數實現了當表格行數變化時，自動更新表格中的序號。新增行和刪除行的操作都會呼叫updateRowNumber函數，從而實現了表格行數變化時序號的自動更新。

透過這樣的程式碼範例，可以很方便地實現表格行數變化時序號的自動更新功能，使表格在資料動態變化時能夠保持良好的展示效果。

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