Cara menggunakan jQuery untuk menambah baris dengan mudah pada jadual

Cara menggunakan jQuery untuk menambah baris pada jadual dengan mudah

Dalam pembangunan web, jadual adalah salah satu elemen halaman yang biasa digunakan, dan secara dinamik menambah baris pada jadual juga merupakan salah satu fungsi yang sering perlu dilaksanakan. Anda boleh dengan mudah menambah baris pada jadual menggunakan jQuery Kaedah pelaksanaan khusus akan diperkenalkan di bawah dan contoh kod akan dilampirkan.

Pertama, kami memerlukan struktur jadual HTML asas:

<table id="myTable">
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Country</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>30</td>
            <td>USA</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>25</td>
            <td>Canada</td>
        </tr>
    </tbody>
</table>
<button id="addRowBtn">Add Row</button>

Seterusnya, kami menggunakan jQuery untuk menulis kod operasi untuk menambah baris:

$(document).ready(function() {
    $("#addRowBtn").click(function() {
        var newRow = "<tr><td>New Name</td><td>New Age</td><td>New Country</td></tr>";
        $("#myTable tbody").append(newRow);
    });
});

Dalam kod di atas, kami mula-mula lulus jQuery's $(document) .ready () kaedah untuk memastikan bahawa dokumen dimuatkan sebelum melakukan operasi. Kemudian dengar peristiwa klik butang melalui kaedah $("#addRowBtn").click() dan laksanakan fungsi panggil balik apabila butang diklik. $(document).ready() 方法来确保文档加载完毕后再执行操作。然后通过 $("#addRowBtn").click() 方法监听按钮的点击事件，当按钮被点击时执行回调函数。

在回调函数中，我们使用变量 newRow 来存储一个新的表格行的HTML代码，然后通过 $("#myTable tbody").append(newRow) 将新的行添加到表格的 <tbody>Dalam fungsi panggil balik, kami menggunakan pembolehubah <code>newRow untuk menyimpan kod HTML baris jadual baharu, dan kemudian lulus $("#myTable tbody").append(newRow) Tambah baris baharu pada jadual.

Atas ialah kandungan terperinci Cara menggunakan jQuery untuk menambah baris dengan mudah pada jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!