插件窝 干货文章 js如何做一个表格

js如何做一个表格

表格 createElement appendChild document 127    来源:    2024-10-19
javascript 提供以下创建表格的方法:1. 创建 table 元素;2. 创建表格头和正文;3. 创建表格行和表格列。具体步骤包括:创建表头行、表头列,以及数据行、数据列;将表格行添加到表格头和正文;将表格头和正文添加到表格;最后,将表格附加到文档。

如何使用 JavaScript 创建表格

JavaScript 提供了多种方法来创建和操作表格元素。以下是创建表格的步骤:

1. 创建 table 元素

const table = document.createElement("table");

2. 创建表格头(thead)和表格正文(tbody)

const thead = document.createElement("thead");
const tbody = document.createElement("tbody");

3. 创建表格行和表格列

// 创建表头行
const headerRow = document.createElement("tr");

// 创建表头列
const headerCol1 = document.createElement("th");
headerCol1.textContent = "名称";

// 将表头列添加到表头行
headerRow.appendChild(headerCol1);

// 创建数据行
const dataRow = document.createElement("tr");

// 创建数据列
const dataCol1 = document.createElement("td");
dataCol1.textContent = "苹果";

// 将数据列添加到数据行
dataRow.appendChild(dataCol1);

4. 将表格行添加到表格头和正文

thead.appendChild(headerRow);
tbody.appendChild(dataRow);

5. 将表格头和正文添加到表格

table.appendChild(thead);
table.appendChild(tbody);

6. 将表格附加到文档

document.body.appendChild(table);

示例代码:

const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");

const headerRow = document.createElement("tr");
const headerCol1 = document.createElement("th");
headerCol1.textContent = "名称";
headerRow.appendChild(headerCol1);

const dataRow = document.createElement("tr");
const dataCol1 = document.createElement("td");
dataCol1.textContent = "苹果";
dataRow.appendChild(dataCol1);

thead.appendChild(headerRow);
tbody.appendChild(dataRow);

table.appendChild(thead);
table.appendChild(tbody);

document.body.appendChild(table);

通过上述步骤,即可使用 JavaScript 创建一个基本的表格。