Bagaimana untuk mencetak jadual dalam Javascript

Sebagai bahasa skrip yang dilaksanakan secara langsung dalam penyemak imbas, JavaScript boleh menjana, memasukkan dan mengubah suai kandungan secara dinamik dalam halaman HTML. Jadual ialah salah satu cara biasa untuk memaparkan data dalam halaman Web, dan keupayaan JavaScript yang berkuasa untuk memanipulasi DOM membolehkan kami menjana dan mengendalikan jadual secara dinamik dalam halaman HTML. Artikel ini akan memperkenalkan cara membuat jadual dalam JavaScript.

Struktur asas jadual HTML

Sebelum memperkenalkan cara menggunakan JavaScript untuk mencipta jadual, mari kita semak semula struktur asas jadual HTML.

Jadual HTML biasanya terdiri daripada tiga elemen: jadual, tr dan td. Antaranya, jadual (jadual) ialah keseluruhan, digunakan untuk mengandungi keseluruhan jadual, tr (baris) mewakili baris dalam jadual, dan td (sel) mewakili sel dalam jadual.

Berikut ialah contoh jadual HTML ringkas:

<table>
  <tr>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

Penjanaan jadual dinamik menggunakan JavaScript

Dalam JavaScript, kita boleh mencipta elemen jadual, baris dan sel dengan , dan tambahkannya pada dokumen untuk menjana jadual secara dinamik.

Buat jadual

Kita boleh mencipta objek elemen jadual menggunakan kaedah document.createElement():

var table = document.createElement('table');

Buat baris dan sel

Gunakan Kaedah table.insertRow() boleh mencipta objek baris baharu dalam jadual dan kaedah row.insertCell() boleh mencipta objek sel dalam baris.

Berikut ialah contoh mencipta jadual secara dinamik, yang menggunakan JavaScript untuk menjana jadual dengan 3 baris dan 3 lajur:

var table = document.createElement('table');
for (var i = 0; i < 3; i++) {
  var row = table.insertRow();
  for (var j = 0; j < 3; j++) {
    var cell = row.insertCell();
    cell.innerHTML = i + "," + j;
  }
}
document.body.appendChild(table);

Dalam kod di atas, kami mula-mula mencipta jadual objek elemen, Dan buat jadual dengan 3 baris dan 3 lajur melalui gelung. Dalam setiap gelung, kami mencipta objek baris baharu menggunakan kaedah insertRow(), mencipta objek sel baharu menggunakan kaedah insertCell() dan menambah objek sel pada baris. Kemudian, kami mengisi setiap sel dengan data melalui atribut innerHTML, dan akhirnya menambah keseluruhan jadual pada dokumen.

Ubah suai gaya jadual

Kita boleh menggunakan atribut element.style dan atribut gaya CSS untuk mengubah suai gaya jadual.

Berikut ialah contoh mengubah suai gaya jadual, yang menggunakan JavaScript untuk menjana jadual secara dinamik dengan warna latar belakang dan jidar:

var table = document.createElement('table');
table.style.backgroundColor = '#eee';
table.style.border = '1px solid #000';

for (var i = 0; i < 3; i++) {
  var row = table.insertRow();
  for (var j = 0; j < 3; j++) {
    var cell = row.insertCell();
    cell.innerHTML = i + "," + j;
    cell.style.border = '1px solid #000';
    cell.style.padding = '10px';
  }
}
document.body.appendChild(table);

Dalam kod di atas, kami menggunakan table.style .backgroundColor dan table.style.sifat sempadan untuk menetapkan warna latar belakang dan gaya sempadan jadual. Kami kemudian menetapkan sempadan dan pelapik pada setiap sel juga untuk menjadikannya kelihatan lebih bagus.

Ringkasan

Jadual ialah salah satu elemen UI biasa dalam aplikasi web Kami boleh menggunakan JavaScript untuk menjana dan memanipulasi jadual secara dinamik. Dalam artikel ini, kami membincangkan cara membuat, mengubah suai dan memanipulasi jadual menggunakan JavaScript. Saya harap artikel ini membantu anda memahami jadual JavaScript dan HTML dengan lebih baik.

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