Bagaimana untuk mengedit javascript dalam jadual

Jadual ialah salah satu elemen yang biasa digunakan dalam pembangunan WEB, digunakan untuk memaparkan data atau halaman susun atur, dsb. Operasi JavaScript berkaitan jadual juga merupakan salah satu kemahiran yang diperlukan untuk pembangun. Artikel ini akan memperkenalkan secara terperinci cara mengedit operasi JavaScript jadual.

1. Pengetahuan asas tentang jadual

Dalam HTML, jadual dilaksanakan menggunakan teg seperti jadual, tr, th, td, dsb., di mana jadual mewakili keseluruhan jadual, tr mewakili baris dalam jadual, dan th mewakili jadual Sel pengepala dalam , td mewakili sel data dalam jadual. Berikut ialah jadual ringkas:

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>25</td>
    <td>女</td>
  </tr>
</table>

Dengan cara ini, jadual yang mengandungi tiga lajur data boleh dipaparkan pada halaman. Seterusnya, kami akan menggunakan jadual ini sebagai contoh untuk menunjukkan cara mengedit jadual melalui JavaScript.

2. Dapatkan objek jadual

Dalam JavaScript, kita boleh mendapatkan objek jadual melalui kaedah getElementById atau kaedah getElementsByTagName objek dokumen, contohnya:

Gunakan kaedah getElementById untuk mendapatkan jadual Objek perlu menambah atribut id pada jadual yang sepadan dalam HTML, contohnya:

var table = document.getElementById("tableId"); //通过id获取表格对象
var td = document.getElementsByTagName("td"); //通过标签名获取所有表格单元格对象

3. Dapatkan baris dan sel dalam jadual

Mendapatkan baris dan sel dalam jadual adalah cara yang paling mudah untuk mengendalikan jadual. Kita boleh mendapatkan semua baris jadual melalui atribut baris objek jadual, dan mendapatkan semua sel dalam baris melalui atribut sel objek baris. Contohnya:

<table id="tableId">
  <!-- 表格内容 -->
</table>

4. Tambah baris dan sel

Selalunya perlu menambah baris dan sel secara dinamik dalam jadual. Kita boleh menambah baris melalui kaedah insertRow, yang mengembalikan objek baris, dan kita boleh menambah sel melalui kaedah insertCell objek. Contohnya:

//获取表头行对象
var thead = table.rows[0];
//获取第一行对象
var tr = table.rows[1];
//获取第一行第一列单元格对象
var td = table.rows[1].cells[0];
//获取第二行第三列单元格对象
var td2 = table.rows[2].cells[2];

Ini akan memasukkan baris pada kedudukan kedua jadual dan memasukkan tiga sel dalam baris.

5. Memadam baris dan sel

Memadam baris dan sel dalam jadual juga merupakan operasi biasa. Kita boleh memadamkan baris melalui kaedah alih keluar objek baris, atau memadam sel melalui kaedah alih keluar objek sel. Contohnya:

//在表格第二个位置插入一行
var newRow = table.insertRow(1);
//在该行第一个位置插入一个单元格
var newCell = newRow.insertCell(0);
newCell.innerHTML = 'Jerry';
//在该行第二个位置插入一个单元格
newCell = newRow.insertCell(1);
newCell.innerHTML = 18;
//在该行第三个位置插入一个单元格
newCell = newRow.insertCell(2);
newCell.innerHTML = '男';

6. Cantumkan sel

Kadangkala kita perlu menggabungkan sel bersebelahan dalam jadual untuk susun atur halaman atau memaparkan data, dsb. Kita boleh menggunakan sifat rowSpan dan colSpan untuk menggabungkan sel. Contohnya:

//获取第三行对象
var row = table.rows[2];
//删除该行
table.deleteRow(row.rowIndex);
//获取第一行第二个单元格对象
var cell = table.rows[0].cells[1];
//删除该单元格
cell.parentNode.removeChild(cell);

Ini menggabungkan sel dalam baris pertama, lajur pertama dan lajur kedua serta memadamkan sel dalam baris kedua, lajur pertama.

7. Ubah suai kandungan sel

Selain menambah, memadam dan menggabungkan sel, mengubah suai kandungan sel juga merupakan salah satu operasi biasa. Kita boleh mengubah suai kandungan teks di dalam sel melalui sifat innerHTML atau sifat innerText objek sel. Contohnya:

//合并第一行第一列和第二列单元格
var td1 = table.rows[0].cells[0];
td1.rowSpan = 2;
//删除第二行第一列单元格
table.rows[1].deleteCell(0);

Pada masa ini, kandungan teks sel dalam baris kedua dan lajur ketiga akan bertukar kepada "perempuan".

8 Ringkasan

Di atas memperkenalkan operasi biasa pengeditan jadual JavaScript, termasuk mendapatkan objek jadual, mendapatkan baris dan sel, menambah dan memadamkan baris dan sel, menggabungkan sel dan mengubah suai sel. Kandungan grid, dsb. Menguasai operasi ini boleh membawa lebih banyak kemudahan dan fleksibiliti kepada penyuntingan jadual kami, dan juga boleh meningkatkan keupayaan pembangunan WEB kami.

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