HOWTO · JavaScript
使用 JavaScript 创建表格
在本文中，我们将看到如何借助 JavaScript 创建表格。
本页内容
使用 JavaScript 数据创建 HTML 表格：通过 document.createElement() 构建表格元素，用 textContent 设置单元格文本，再通过 appendChild() 将完整表格添加到页面容器中。当表格行来自页面运行期间会变化的数据时，这种方式很有用。
HTML 表格结构及所需元素
表格通过嵌套元素描述内容。table 元素包含行（tr）；每行包含表头单元格（th）或数据单元格（td）。用 th 标记用于说明行或列的单元格，用 td 标记普通数据。表头单元格不只限于 thead，也可以用于标记表格主体中的行。
thead 和 tbody 元素分别用于分组表头行和主体行。它们能让较大的表格更易于组织，但并非每个表格都必须使用。需要汇总行或页脚行时，可以用 tfoot 分组。对于较小的表格，核心结构是包含行和单元格的 table；在分组元素能让结构更清晰时再添加它们。
使用 JavaScript 创建并填充表格
下面的示例会创建一行表头和两行数据。表格有三列：编号、姓名和公司，并使用 textContent 将普通文本放入各个单元格。这样会把值当作文本处理，而不是解析为 HTML；对于可能包含用户输入的数据，这是更安全的默认做法。
下面的浏览器示例使用原生 DOM，并将完成的表格添加到已有的 #table-container 中。后面的独立 Node.js 演示使用一个简单的 DOM 模型来展示构建行的逻辑及其计数；它不会创建可在浏览器中显示的表格。
浏览器页面示例（保存为 HTML 页面并在浏览器中打开）：
本节中的代码以及显示的标签或输出仍为英文。
<!doctype html>
<html lang="en">
<body>
<div id="table-container"></div>
<script>
const container = document.getElementById("table-container");
const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");
const headings = ["No.", "Name", "Company"];
const records = [
["1", "James Clerk", "Netflix"],
["2", "Adam White", "Microsoft"]
];
const headerRow = document.createElement("tr");
for (const heading of headings) {
const cell = document.createElement("th");
cell.textContent = heading;
headerRow.appendChild(cell);
}
thead.appendChild(headerRow);
for (const record of records) {
const row = document.createElement("tr");
for (const value of record) {
const cell = document.createElement("td");
cell.textContent = value;
row.appendChild(cell);
}
tbody.appendChild(row);
}
table.appendChild(thead);
table.appendChild(tbody);
container.appendChild(table);
</script>
</body>
</html>
运行下面这个独立的 JavaScript 示例：
class Element {
constructor(name) {
this.name = name;
this.children = [];
this.textContent = "";
}
appendChild(child) {
this.children.push(child);
return child;
}
}
const document = {
createElement(name) {
return new Element(name);
},
body: new Element("body")
};
const container = document.createElement("div");
container.id = "table-container";
document.body.appendChild(container);
const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");
const headings = ["No.", "Name", "Company"];
const records = [
["1", "James Clerk", "Netflix"],
["2", "Adam White", "Microsoft"]
];
const headerRow = document.createElement("tr");
for (const heading of headings) {
const cell = document.createElement("th");
cell.textContent = heading;
headerRow.appendChild(cell);
}
thead.appendChild(headerRow);
for (const record of records) {
const row = document.createElement("tr");
for (const value of record) {
const cell = document.createElement("td");
cell.textContent = value;
row.appendChild(cell);
}
tbody.appendChild(row);
}
table.appendChild(thead);
table.appendChild(tbody);
container.appendChild(table);
const tableElement = container.children[0];
const headerCells = tableElement.children[0].children[0].children;
const bodyRows = tableElement.children[1].children;
console.log(`${headerCells.length} headings, ${bodyRows.length} data rows`);
3 headings, 2 data rows
document.createElement() 接收字符串形式的元素名称，并返回一个新元素。代码为每一行创建一个 tr，再向其中添加 th 或 td 单元格。每个单元格填入内容后，再将所在行放入 thead 或 tbody。最后，把这些分组放入表格，并将表格添加到示例开头创建的容器中。
对于你能控制的页面，容器可以很简单，例如 <div id="table-container"></div>。在浏览器代码中，使用 document.getElementById("table-container") 选中这个已有元素，再将完成的表格添加到其中。可以把脚本放在页面容器之后，或等文档加载完成后再运行，以确保目标元素已经存在。样式应另外通过 CSS 设置，例如为 table、th 和 td 添加边框和内边距；JavaScript 创建结构和内容，CSS 控制它们的外观。
将表格添加到 DOM 并验证结果
使用 container.appendChild(table) 将完成的表格添加到选定容器中。这会把表格放入该容器，同时保留页面的其余内容。如果要用表格替换现有内容，请先有意清除这些内容；否则，每次运行都会再添加一个表格。
要验证结果，请打开浏览器开发者工具，并在“元素”（Elements）面板中检查该容器。容器中应有一个 table，其中 thead 包含一行三个 th 单元格，tbody 包含两行，每行三个 td 单元格。渲染出的表格应显示表头“No.”、“Name”和“Company”，下面是 James Clerk / Netflix 和 Adam White / Microsoft。示例中的这些表头和数据标签保持英文。若表格没有出现，请确认容器 ID 和脚本运行时机。对于纯文本值，请继续使用 textContent，不要将数据赋给 innerHTML。
