Operasi jadual induk dan pemprosesan data dalam JavaScript

Untuk menguasai operasi jadual dan pemprosesan data dalam JavaScript, contoh kod khusus diperlukan

Dalam pembangunan web, jadual ialah cara biasa untuk memaparkan data. JavaScript ialah bahasa pengaturcaraan yang berkuasa yang boleh merealisasikan pemprosesan dinamik dan interaksi data oleh jadual pengendalian. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk memanipulasi dan memproses data jadual dan memberikan contoh kod khusus.

1. Cipta jadual

Dalam HTML, anda boleh menggunakan teg jadual untuk mencipta jadual ringkas. Dalam JavaScript, anda boleh mencipta elemen jadual baharu melalui kaedah createElement objek dokumen dan menambahnya pada halaman.

Contoh kod:

// 创建一个table元素
var table = document.createElement("table");

// 设置表格的class属性
table.className = "table";

// 创建表格的头部
var thead = document.createElement("thead");
var tr = document.createElement("tr");
var th1 = document.createElement("th");
th1.innerHTML = "姓名";
var th2 = document.createElement("th");
th2.innerHTML = "年龄";
tr.appendChild(th1);
tr.appendChild(th2);
thead.appendChild(tr);

// 创建表格的内容
var tbody = document.createElement("tbody");
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML = data[i].name;
  var td2 = document.createElement("td");
  td2.innerHTML = data[i].age;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

// 将头部和内容添加到表格中
table.appendChild(thead);
table.appendChild(tbody);

// 将表格添加到页面中的某个元素中
var container = document.getElementById("container");
container.appendChild(table);

2 Membaca data jadual

Melalui JavaScript, anda boleh membaca data dalam jadual dan memprosesnya. Anda boleh menggunakan atribut baris bagi elemen jadual untuk mendapatkan data baris dalam jadual dan atribut sel untuk mendapatkan data sel dalam baris.

Contoh kod:

// 获取表格中的所有行
var rows = table.rows;

// 遍历每一行
for (var i = 0; i < rows.length; i++) {
  var cells = rows[i].cells;
  
  // 获取每一行中的单元格数据
  var name = cells[0].innerHTML;
  var age = cells[1].innerHTML;
  
  // 处理数据...
}

3 Tambahkan data pada jadual

Melalui JavaScript, anda boleh menambah data pada jadual secara dinamik. Anda boleh menggunakan kaedah insertRow bagi elemen jadual untuk memasukkan baris baharu pada kedudukan yang ditentukan dalam jadual dan kaedah insertCell untuk memasukkan sel baharu dalam baris.

Contoh kod:

// 在表格的末尾插入一行
var newRow = table.insertRow(-1);

// 在行中插入单元格
var cell1 = newRow.insertCell(0);
cell1.innerHTML = "张三";
var cell2 = newRow.insertCell(1);
cell2.innerHTML = "20";

4 Kemas kini data jadual

Melalui JavaScript, anda juga boleh mengemas kini data dalam jadual. Anda boleh mengubah suai secara langsung atribut innerHTML sel dalam jadual untuk mengemas kini data.

Contoh kod:

// 更新表格中的某个单元格数据
var row = table.rows[1];
row.cells[1].innerHTML = "30";

5. Padam data jadual

Melalui JavaScript, anda boleh memadam data dalam jadual. Anda boleh menggunakan kaedah deleteRow bagi elemen jadual untuk memadam baris dalam jadual.

Contoh kod:

// 删除表格中的某一行
var row = table.rows[1];
table.deleteRow(row.rowIndex);

6. Isih jadual

Melalui JavaScript, anda boleh mengisih data dalam jadual. Anda boleh menggunakan kaedah isihan objek Array untuk mengisih data dan memaparkan semula jadual.

Contoh kod:

// 对表格中的数据按年龄进行排序
data.sort(function(a, b) {
  return a.age - b.age;
});

// 清空表格内容
tbody.innerHTML = "";

// 重新渲染表格
for (var i = 0; i < data.length; i++) {
  var tr = document.createElement("tr");
  var td1 = document.createElement("td");
  td1.innerHTML = data[i].name;
  var td2 = document.createElement("td");
  td2.innerHTML = data[i].age;
  tr.appendChild(td1);
  tr.appendChild(td2);
  tbody.appendChild(tr);
}

Di atas ialah contoh kod khusus menggunakan JavaScript untuk operasi jadual dan pemprosesan data. Dengan menguasai kemahiran ini, kami boleh memanipulasi dan memproses data jadual secara fleksibel dan mencapai kesan interaktif yang lebih kaya. Saya harap kandungan artikel ini dapat membantu anda.

Atas ialah kandungan terperinci Operasi jadual induk dan pemprosesan data dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!