Bagaimana untuk menambah baris ke jadual dalam jquery

Hari ini, mari kita bincangkan cara menambah baris pada jadual menggunakan jQuery. Jika anda seorang pembangun web, anda mesti tahu bahawa membentangkan data pada halaman adalah penting. Jadual ialah cara yang sangat baik untuk mempersembahkan data. Untuk menggunakan jadual untuk memaparkan data, anda mesti tahu cara menggunakan jQuery untuk menambah baris secara dinamik.

Mari kita lihat cara menambah baris pada jadual menggunakan jQuery.

Langkah pertama ialah mendapatkan objek jadual. Jika anda sudah mempunyai objek jadual, anda hanya perlu menggunakan baris kod berikut dalam jQuery untuk mendapatkannya:

var table = $('table');

Jika anda tidak mempunyai objek jadual, maka anda perlu menggunakan yang berikut baris kod untuk mencipta satu objek jadual:

var table = $('<table></table>');

Langkah kedua ialah mencipta objek baris. Untuk mencipta objek baris, anda perlu menggunakan baris kod berikut:

var row = $('<tr></tr>');

Langkah ketiga ialah mencipta objek sel. Untuk menambah sel pada baris, anda perlu menggunakan baris kod berikut:

var cell = $('<td></td>');

Langkah keempat ialah menambah objek sel pada objek baris .

row.append(cell);

Langkah kelima ialah menambah objek baris pada objek jadual.

table.append(row);

Sekarang, anda telah selesai menambah baris sel pada jadual.

Walau bagaimanapun, dalam aplikasi sebenar, anda perlu menambah berbilang sel pada setiap baris dalam jadual, dan mungkin setiap sel mempunyai data dan gaya yang berbeza Dalam kes ini, anda perlu menggunakan gelung ( untuk gelung). untuk membina jadual yang lengkap. Seterusnya, mari kita lihat kod lengkap:

var data = [
    {name: 'John', age: 30},
    {name: 'Jane', age: 28},
    {name: 'Bob', age: 35},
    {name: 'Mary', age: 29}
];

var table = $('<table></table>');
    
for(var i = 0; i < data.length; i++){
    var row = $('<tr></tr>');
    var name = $('').text(data[i].name);
    var age = $('').text(data[i].age);
        
    row.append(name).append(age);
    table.append(row);    
}

$('#tableWrapper').empty().append(table);

Kod ini menggunakan gelung for untuk melintasi senarai data dan menggunakan kaedah text() untuk menambah teks pada sel. Akhir sekali, gunakan kaedah empty() untuk mengosongkan kandungan elemen #tableWrapper, dan gunakan kaedah append() untuk menambah objek jadual padanya, melengkapkan pembinaan keseluruhan jadual jadual.

Ringkasan:

Dalam artikel ini, kami mempelajari cara menggunakan jQuery untuk menambah satu dan berbilang baris pada jadual. Ini adalah teknik yang sangat berguna, terutamanya apabila anda perlu menambah data dinamik pada halaman. Sekarang anda telah menguasai cara menambah baris pada jadual jQuery, pergi dan cuba!

Atas ialah kandungan terperinci Bagaimana untuk menambah baris ke jadual dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!