Bagaimana untuk menyediakan jadual dalam javascript

JavaScript ialah bahasa skrip yang digunakan secara meluas yang boleh digunakan untuk membuat aplikasi web interaktif dan juga sesuai untuk menyediakan jadual HTML. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk menyediakan jadual HTML, termasuk penciptaan jadual, menambah baris dan sel serta tetapan gaya.

1. Cipta jadual HTML

Terdapat dua cara untuk mencipta jadual dalam JavaScript. Yang pertama ialah menggunakan atribut innerHTML, kodnya adalah seperti berikut:

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML = "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr><tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>"; // 设置表格内容
document.body.appendChild(table); // 将表格添加到页面中

Kaedah lain ialah menggunakan DOM untuk mencipta jadual, kodnya adalah seperti berikut:

var table = document.createElement("table"); // 创建一个table元素
var row1 = document.createElement("tr"); // 创建第一行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "第一行，第一列"; // 设置单元格内容
cell2.innerHTML = "第一行，第二列";
row1.appendChild(cell1); // 将单元格添加到行中
row1.appendChild(cell2);
var row2 = document.createElement("tr"); // 创建第二行
var cell3 = document.createElement("td"); // 创建第一列单元格
var cell4 = document.createElement("td"); // 创建第二列单元格
cell3.innerHTML = "第二行，第一列";
cell4.innerHTML = "第二行，第二列";
row2.appendChild(cell3); // 将单元格添加到行中
row2.appendChild(cell4);
table.appendChild(row1); // 将行添加到表格中
table.appendChild(row2);
document.body.appendChild(table); // 将表格添加到页面中

2. Tambah baris dan sel

Terdapat juga dua cara untuk menambah baris dan sel jadual dalam JavaScript. Satu ialah menggunakan atribut innerHTML, kodnya adalah seperti berikut:

var table = document.createElement("table"); // 创建一个table元素
table.innerHTML += "<tr><td>第一行，第一列</td><td>第一行，第二列</td></tr>"; // 添加一行
table.innerHTML += "<tr><td>第二行，第一列</td><td>第二行，第二列</td></tr>";
document.body.appendChild(table); // 将表格添加到页面中

Kaedah lain ialah menggunakan DOM untuk menambah baris dan sel, kodnya adalah seperti berikut:

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
table.appendChild(row); // 将行添加到表格中
document.body.appendChild(table); // 将表格添加到页面中

3. Tetapan gaya

Menyediakan gaya jadual menggunakan JavaScript juga mudah. Anda boleh menggunakan atribut gaya untuk menetapkan gaya baris dan sel Kodnya adalah seperti berikut:

var table = document.createElement("table"); // 创建一个table元素
var row = document.createElement("tr"); // 创建新行
var cell1 = document.createElement("td"); // 创建第一列单元格
var cell2 = document.createElement("td"); // 创建第二列单元格
cell1.innerHTML = "新行，第一列"; // 设置单元格内容
cell2.innerHTML = "新行，第二列";
cell1.style.border = "1px solid black"; // 设置单元格边框
cell2.style.border = "1px solid black";
row.appendChild(cell1); // 将单元格添加到行中
row.appendChild(cell2);
row.style.backgroundColor = "cyan"; // 设置行背景色
table.appendChild(row); // 将行添加到表格中
table.style.borderCollapse = "collapse"; // 设置表格边框合并
document.body.appendChild(table); // 将表格添加到页面中

Ringkasan:

Artikel ini memperkenalkan cara menggunakan JavaScript untuk menetapkan jadual HTML, termasuk membuat jadual dan menambah baris dan sel, dan tetapan gaya. Menetapkan jadual melalui JavaScript boleh menjadikan gaya jadual lebih fleksibel dan cantik. Pembangun boleh mengubah suai dan mengembangkan mengikut keperluan mereka sendiri untuk mencapai tetapan jadual yang lebih kompleks dan cekap.

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