Tambah baris pada jadual javascript

Dalam pembangunan web, jadual ialah elemen biasa. Jadual boleh digunakan untuk memaparkan data, melakukan analisis data dan visualisasi, dsb. Apabila data berubah secara dinamik, kami mungkin perlu terus menambah baris data baharu pada jadual. Dalam JavaScript, kami boleh menambah baris jadual secara dinamik dengan cara berikut.

Persediaan

Sebelum mula menulis kod JavaScript untuk menambah baris jadual, kita perlu mentakrifkan struktur asas jadual dalam fail HTML. Contohnya:

 
 
 
Name
 
Age
 
City
 
 
 
 
 
John
 
25
 
New York
 
 
 
Jane
 
30
 
Los Angeles
 
 
 

Dalam contoh ini, kami mentakrifkan jadual yang mengandungi dua baris jadual dan memberikannya atributiduntuk mendapatkan elemen jadual yang sepadan dalam JavaScript.

Tambah baris jadual melalui operasi DOM

Kami boleh menambah baris jadual melalui operasi DOM. Khususnya, kita perlu mendapatkan elemen jadual terlebih dahulu, kemudian mencipta elemen baris jadual, dan menambah baris pada elementbodyjadual.

// 获取表格元素 const table = document.getElementById('myTable'); // 创建新的表格行 const newRow = document.createElement('tr'); // 创建新的表格单元格并添加文本内容 const nameCell = document.createElement('td'); nameCell.textContent = 'Tom'; newRow.appendChild(nameCell); const ageCell = document.createElement('td'); ageCell.textContent = '35'; newRow.appendChild(ageCell); const cityCell = document.createElement('td'); cityCell.textContent = 'Chicago'; newRow.appendChild(cityCell); // 将新的行添加到表格中 const tbody = table.getElementsByTagName('tbody')[0]; tbody.appendChild(newRow);

Dalam contoh ini, kita mula-mula mendapatkan elemen jadual dengan IDmyTable, kemudian buat elemen baris jadual baharu dan tambah kandungan teks pada setiap sel dalam baris ini. Akhir sekali, kami mendapat elementbodyjadual dan menambah baris jadual baharu padanya.

Gunakan innerHTML untuk menambah baris jadual

Selain menambah baris jadual melalui operasi DOM, anda juga boleh menggunakan atributinnerHTMLuntuk menambah baris data jadual dengan cepat. Khususnya, kita boleh menulis data baris jadual baharu ke dalam rentetan HTML, dan kemudian menetapkan rentetan itu kepada atributinnerHTMLjadual.

// 获取表格元素 const table = document.getElementById('myTable'); // 定义新的表格行HTML字符串 const newRowHtml = 'Tom35Chicago'; // 将HTML字符串添加到表格中 const tbody = table.getElementsByTagName('tbody')[0]; tbody.innerHTML += newRowHtml;

Dalam contoh ini, kita mula-mula mendapatkan elemen jadual dengan IDmyTabledan kemudian mentakrifkan rentetan HTML baris jadual baharu. Akhir sekali, kami mendapat elementbodyjadual dan menambah rentetan HTML baris jadual padanya.

Kesimpulan

Dalam JavaScript, kami boleh menambah baris jadual melalui operasi DOM atau atributinnerHTML. Dalam pembangunan sebenar, kita harus memilih untuk menggunakan salah satu kaedah ini mengikut situasi tertentu. Tidak kira kaedah yang digunakan, kita perlu mendapatkan elemen jadual terlebih dahulu dan memastikan struktur HTML dan format data jadual adalah betul. Dengan kerap menyemak struktur dan data jadual anda, anda boleh mengelakkan ralat dalam kod dan ralat data anda.

Atas ialah kandungan terperinci Tambah baris pada jadual javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!