Gunakan jQuery untuk menjana jadual dinamik dengan nombor baris-tutorial js-php.cn

Gunakan jQuery untuk menjana jadual dinamik dengan nombor baris

王林

Lepaskan： 2024-02-26 21:39:07

asal

460 orang telah melayarinya

Gunakan jQuery untuk menjana jadual dinamik dengan nombor baris

Petua jQuery: Menjana jadual secara dinamik dan meningkatkan nombor baris secara automatik

Dalam pembangunan web, selalunya perlu menjana jadual secara dinamik untuk memaparkan data. Pada masa yang sama, untuk memudahkan pengguna melihat kandungan jadual, kita selalunya perlu menambah nombor baris pada jadual. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menjana jadual secara dinamik dan meningkatkan nombor baris secara automatik.

Pertama, kita memerlukan struktur HTML yang ringkas, termasuk butang untuk mencetuskan tindakan menjana jadual secara dinamik dan elemen

kosong untuk meletakkan jadual yang dijana.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table with Row Numbers</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <button id="generateTable">生成表格</button>
    <div id="tableContainer"></div>

    <script>
        // jQuery代码将会在下文中给出
    </script>
</body>
</html>

Salin selepas log masuk

Seterusnya, kami menggunakan jQuery untuk menulis kod untuk menjana jadual secara dinamik dan meningkatkan nombor baris secara automatik. Kodnya adalah seperti berikut:

$(document).ready(function() {
    $('#generateTable').click(function() {
        var tableHtml = '<table border="1">';
        for (var i = 0; i < 5; i++) { // 生成5行表格，实际应用中可以根据需求动态设置行数
            tableHtml += '<tr><td>' + (i + 1) + '</td><td>数据列1</td><td>数据列2</td></tr>';
        }
        tableHtml += '</table>';

        $('#tableContainer').html(tableHtml);
    });
});

Salin selepas log masuk

Dalam kod di atas, kami menggunakan fungsi $(document).ready() jQuery untuk memastikan halaman dimuatkan sebelum melaksanakan kod. Apabila butang diklik, peristiwa klik dicetuskan, jadual yang mengandungi 5 baris dijana dan nombor baris ditambahkan pada setiap baris. Dalam aplikasi sebenar, kandungan dan gaya yang lebih kompleks boleh ditambah pada jadual mengikut keperluan.

Melalui kod di atas, kami telah menyedari fungsi menjana jadual secara dinamik dan menambah nombor baris secara automatik. Teknik ini boleh membantu kami memaparkan data dengan lebih mudah dan memudahkan pengguna membaca dan memahami kandungan jadual. Saya berharap melalui pengenalan artikel ini, pembaca boleh menggunakan teknik ini secara fleksibel dalam projek mereka sendiri untuk meningkatkan pengalaman pengguna.

Atas ialah kandungan terperinci Gunakan jQuery untuk menjana jadual dinamik dengan nombor baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!