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:

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>Los Angeles</td>
    </tr>
  </tbody>
</table>

Dalam contoh ini, kami mentakrifkan jadual yang mengandungi dua baris jadual dan memberikannya atribut id untuk 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 elemen tbody jadual.

// 获取表格元素
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 ID myTable, kemudian buat elemen baris jadual baharu dan tambah kandungan teks pada setiap sel dalam baris ini. Akhir sekali, kami mendapat elemen tbody jadual dan menambah baris jadual baharu padanya.

Gunakan innerHTML untuk menambah baris jadual

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

// 获取表格元素
const table = document.getElementById('myTable');

// 定义新的表格行HTML字符串
const newRowHtml = '<tr><td>Tom</td><td>35</td><td>Chicago</td></tr>';

// 将HTML字符串添加到表格中
const tbody = table.getElementsByTagName('tbody')[0];
tbody.innerHTML += newRowHtml;

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

Kesimpulan

Dalam JavaScript, kami boleh menambah baris jadual melalui operasi DOM atau atribut innerHTML. 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!