Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik-tutorial js-php.cn

Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik

PHPz

Lepaskan： 2024-02-26 16:06:33

asal

811 orang telah melayarinya

Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas dalam pembangunan web. Dalam pembangunan web, kami sering menghadapi situasi di mana data perlu dipaparkan, dan jadual adalah cara biasa untuk memaparkan data. Dalam jadual dinamik, selalunya terdapat operasi seperti pemadaman, penambahan, pengisihan, dll. Pada masa ini, adalah perlu untuk mengemas kini nombor siri dalam jadual secara automatik apabila bilangan baris dalam jadual berubah. Berikut akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mencapai fungsi ini.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik</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>

Salin selepas log masuk

Dalam kod di atas, jadual yang mengandungi nama dan umur pertama kali dibuat, dan pengepala yang mengandungi nombor siri, nama dan umur ditambah. Kemudian saya menggunakan jQuery untuk menulis dua pendengar acara, masing-masing untuk menambah baris dan memadam baris. Antaranya, melalui fungsi updateRowNumber函数实现了当表格行数变化时，自动更新表格中的序号。新增行和删除行的操作都会调用updateRowNumber, nombor siri dikemas kini secara automatik apabila bilangan baris jadual berubah.

Melalui contoh kod sedemikian, anda boleh melaksanakan fungsi kemas kini automatik nombor siri dengan mudah apabila bilangan baris jadual berubah, supaya jadual dapat mengekalkan kesan paparan yang baik apabila data berubah secara dinamik.

Atas ialah kandungan terperinci Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!