Bagaimana untuk menambah jadual dalam javascript

JavaScript ialah bahasa skrip sebelah klien yang boleh dibenamkan terus ke halaman web melalui dokumen HTML dan dijalankan pada penyemak imbas web. Banyak kesan interaktif halaman web boleh dicapai melalui JavaScript, termasuk menjana jadual HTML secara dinamik. Cara menggunakan JavaScript untuk menjana jadual HTML, salah satu kaedah akan diperkenalkan di bawah.

Langkah 1: Cipta bekas jadual

Untuk menjana jadual HTML, anda perlu mencipta bekas jadual dalam dokumen HTML terlebih dahulu untuk menyimpan jadual yang dijana. Dalam HTML, bekas jadual boleh diwakili oleh elemen jadual, iaitu:

<table id="myTable"></table>

Dalam kod di atas, atribut id digunakan untuk menentukan pengecam unik untuk bekas jadual, yang sesuai untuk Sebut Harga JavaScript.

Langkah 2: Tambahkan pengepala jadual

Pengepala jadual secara amnya termasuk nama lajur jadual, yang boleh ditambah secara dinamik melalui JavaScript. Berikut ialah kod sampel untuk menambah pengepala jadual:

var table = document.getElementById("myTable");
var thead = table.createTHead();
var row = thead.insertRow();
var cell1 = row.insertCell();
var cell2 = row.insertCell();
cell1.innerHTML = "<b>姓名</b>";
cell2.innerHTML = "<b>年龄</b>";

Dalam kod di atas, rujukan kepada bekas jadual pertama kali diperoleh melalui kaedah getElementById, kemudian kaedah createTHead dipanggil untuk mencipta jadual pengepala, dan kemudian pengepala jadual ditambah melalui kaedah insertRow Satu baris pengepala dibuat, dan akhirnya dua sel ditambah melalui kaedah insertCell, dan kandungan teks sel ditetapkan menggunakan atribut innerHTML.

Langkah 3: Tambah data jadual

Data jadual biasanya diperoleh daripada pelayan bahagian belakang Data boleh diperoleh secara tidak segerak melalui Ajax dan kaedah lain, dan kemudian ditambah secara dinamik pada jadual melalui JavaScript. Berikut ialah kod sampel untuk menambah data jadual:

function loadData() {
  // 通过Ajax获取数据，然后解析成一个二维数组
  var data = [
    ["张三", 22],
    ["李四", 23],
    ["王五", 24],
    ...
  ];
  var table = document.getElementById("myTable");
  var tbody = table.createTBody();
  for (var i = 0; i < data.length; i++) {
    var row = tbody.insertRow();
    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    cell1.innerHTML = data[i][0];
    cell2.innerHTML = data[i][1];
  }
}

Dalam kod di atas, fungsi loadData memperoleh data tatasusunan dua dimensi melalui Ajax, dan kemudian merentasi tatasusunan melalui gelung for untuk mencipta secara dinamik baris dan sel jadual, dan isikan data ke dalam sel.

Langkah 4: Panggil fungsi

Dalam dokumen HTML, kita boleh memanggil fungsi loadData melalui butang atau kaedah interaktif lain untuk memuatkan data jadual secara dinamik. Berikut ialah contoh kod untuk memanggil fungsi:

<button onclick="loadData()">加载表格数据</button>

Selepas mengklik butang, fungsi loadData akan dipanggil untuk melengkapkan proses penjanaan jadual HTML secara dinamik. Di atas ialah contoh menggunakan JavaScript untuk menambah jadual HTML secara dinamik. Dalam aplikasi sebenar, kod boleh dilaraskan secara fleksibel mengikut keperluan sebenar untuk mencapai kesan jadual yang lebih kompleks.

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