Rumah > Artikel > hujung hadapan web > Petua jQuery: Sisipkan baris baharu secara dinamik ke dalam jadual
Petua jQuery: Sisipkan baris baharu secara dinamik ke dalam jadual
- PHPzasal
- 2024-02-28 11:51:03740semak imbas
Tajuk: Petua jQuery: Secara Dinamik Masukkan Baris Baharu ke dalam Jadual
Dalam pembangunan web, selalunya perlu untuk memasukkan baris baharu secara dinamik ke dalam jadual Fungsi ini boleh dilaksanakan dengan mudah menggunakan jQuery. Berikut akan memperkenalkan cara menggunakan jQuery untuk memasukkan baris baharu secara dinamik ke dalam jadual, dan memberikan contoh kod khusus.
Pertama, pastikan perpustakaan jQuery diperkenalkan dalam fail HTML, sama ada melalui pautan CDN atau fail setempat. Di bawah ialah struktur HTML ringkas yang mengandungi jadual dan butang:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态在表格中插入新的行</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="myTable"> <tr> <th>Name</th> <th>Age</th> </tr> </table> <button id="addRowBtn">新增行</button> </body> </html>
Seterusnya, kita perlu menulis kod jQuery untuk memasukkan baris baharu dalam jadual apabila butang itu diklik. Kodnya adalah seperti berikut:
$(document).ready(function() {
$('#addRowBtn').click(function() {
var name = prompt('请输入姓名：');
var age = prompt('请输入年龄：');
var newRow = '<tr><td>' + name + '</td><td>' + age + '</td></tr>';
$('#myTable').append(newRow);
});
});Dalam kod di atas, kami mula-mula mengikat acara klik butang selepas dokumen dimuatkan Apabila butang diklik, dua kotak gesaan muncul untuk memasukkan nama dan umur masing-masing, dan nilai yang dimasukkan disambungkan bersama-sama kod HTML ke dalam baris jadual baharu. Akhir sekali, gunakan kaedah append() jQuery untuk memasukkan baris baharu ke dalam jadual.
Kini, kami telah menyelesaikan fungsi memasukkan baris baharu secara dinamik dalam jadual. Anda boleh menyalin dan menampal kod HTML dan jQuery di atas ke dalam fail HTML, bukanya dalam penyemak imbas, dan klik butang untuk menguji kesannya. Melalui contoh ini, saya harap ia dapat membantu anda mempelajari cara menggunakan jQuery untuk memasukkan baris baharu secara dinamik ke dalam jadual.
Atas ialah kandungan terperinci Petua jQuery: Sisipkan baris baharu secara dinamik ke dalam jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!