Gunakan jQuery untuk melaksanakan nombor siri jadual yang meningkat secara dinamik-tutorial js-php.cn

Gunakan jQuery untuk melaksanakan nombor siri jadual yang meningkat secara dinamik

WBOY

Lepaskan： 2024-02-26 19:51:33

asal

1259 orang telah melayarinya

Gunakan jQuery untuk melaksanakan nombor siri jadual yang meningkat secara dinamik

Gunakan jQuery untuk menyedari bahawa nombor siri jadual meningkat secara automatik apabila bilangan baris berubah

Dalam pembangunan web, kita sering menghadapi situasi di mana kita perlu menambah nombor siri pada jadual. Jika bilangan baris dalam jadual berubah dengan kerap, anda perlu melaraskan nombor siri dalam jadual secara dinamik, dan jQuery boleh mencapai fungsi ini dengan mudah. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan peningkatan nombor siri secara automatik dalam jadual apabila bilangan baris berubah, dan melampirkan contoh kod tertentu.

Pertama, kita perlu mencipta jadual dalam fail HTML dan menambah sel yang mengandungi nombor siri pada setiap baris jadual untuk memaparkan nombor siri. Kodnya 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>表格序号随行数变化自动增加</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="myTable">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="index"></td>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td class="index"></td>
            <td>李四</td>
            <td>25</td>
        </tr>
        <tr>
            <td class="index"></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>

Salin selepas log masuk

Dalam kod di atas, kami menentukan jadual ringkas, termasuk tiga lajur: nombor siri, nama dan umur serta menambah nama kelas indeks pada sel nombor siri. Untuk membuat pilihan dalam jQuery. index，用于在jQuery中进行选择。

接下来，我们创建一个JavaScript文件script.js，来编写jQuery代码实现序号随行数变化自动增加的功能。代码如下所示：

$(document).ready(function() {
    $("#myTable tbody tr").each(function(index) {
        $(this).find(".index").text(index + 1);
    });

    $("#myTable").on("DOMNodeInserted", function() {
        $("#myTable tbody tr").each(function(index) {
            $(this).find(".index").text(index + 1);
        });
    });

    $("#myTable").on("DOMNodeRemoved", function() {
        $("#myTable tbody tr").each(function(index) {
            $(this).find(".index").text(index + 1);
        });
    });
});

Salin selepas log masuk

在上面的代码中，我们首先在页面加载完成后，通过each方法遍历表格中的每一行，并为序号单元格赋予对应的序号值。然后，通过on方法监听表格中行的插入和删除事件，若表格中的行数发生变化，会重新调整每行中序号单元格的值，确保序号能够随行数变化而自动增加。

最后，将以上代码保存到同一目录下的script.js

Seterusnya, kami mencipta fail JavaScript script.js untuk menulis kod jQuery bagi melaksanakan fungsi meningkatkan nombor siri secara automatik apabila bilangan baris berubah. Kodnya adalah seperti berikut:

rrreee

Dalam kod di atas, kami mula-mula melintasi setiap baris dalam jadual melalui kaedah setiap selepas halaman dimuatkan, dan menetapkan nilai nombor siri yang sepadan kepada nombor siri sel. Kemudian, gunakan kaedah on untuk memantau peristiwa sisipan dan pemadaman baris dalam jadual Jika bilangan baris dalam jadual berubah, nilai sel nombor siri dalam setiap baris akan dilaraskan semula kepada. pastikan nombor siri boleh berubah secara automatik apabila bilangan baris berubah. 🎜🎜Akhir sekali, simpan kod di atas ke fail script.js dalam direktori yang sama, dan perkenalkan perpustakaan jQuery dan fail JavaScript ke dalam fail HTML, supaya nombor siri jadual boleh ditingkatkan secara automatik apabila bilangan baris berubah Kesan. 🎜🎜Melalui pelaksanaan di atas, kami boleh melaksanakan fungsi meningkatkan nombor siri secara automatik dalam jadual dengan mudah apabila bilangan baris berubah, memberikan pengalaman pengguna dan kesan paparan data yang lebih baik untuk halaman web. 🎜

Atas ialah kandungan terperinci Gunakan jQuery untuk melaksanakan nombor siri jadual yang meningkat secara dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!