使用 JavaScript 动态创建 HTML 表格并填充数组数据_技术教程

本教程详细介绍了如何利用 JavaScript 动态生成 HTML 表格，并将数组中的数据逐一填充到表格的每个单元格中。文章涵盖了从基本的 HTML 结构、JavaScript DOM 操作到 CSS 样式设置的完整过程，旨在帮助开发者高效地实现数据在网页上的结构化展示。

在现代前端开发中，经常需要将后台数据或本地数组数据以结构化的表格形式展示在网页上。手动编写所有表格行和单元格既耗时又难以维护，尤其当数据量较大或需要动态更新时。本文将指导您如何使用 JavaScript 有效地动态创建 HTML 表格，并填充来自数组的数据。

1. 核心概念

实现这一功能主要依赖于以下几个核心概念：

HTML 结构: 提供一个基础的元素作为容器，通常包含表头。

JavaScript 数组: 存储需要展示的数据。

DOM 操作: 使用 JavaScript 提供的 document 对象方法来创建、修改和添加 HTML 元素（如 createElement, getElementById, append, innerText 等）。

循环迭代: 遍历数组，为每个数据项生成对应的表格行和单元格。

2. HTML 结构准备

首先，我们需要在 HTML 文件中创建一个空的

元素，并为其指定一个唯一的 id，以便 JavaScript 可以轻松地获取到它。此外，我们通常会预先定义表格的头部（) const tr = document.createElement("tr"); // 创建一个单元格 ( 元素中。

table.append(tr): 将完整的

元素（包含两个

），以明确各列的含义。

在这个例子中，我们创建了一个 id 为 fruits-table 的表格，并定义了“序号”和“水果名称”两个表头。

3. JavaScript 逻辑实现

接下来是核心的 JavaScript 部分。我们将定义一个数组来存储数据，并编写一个函数来处理表格的动态生成和数据填充。

// 定义一个包含水果名称的数组
const fruits = ['苹果', '橘子', '葡萄', '香蕉', '番石榴', '西瓜', '芒果'];

// 定义一个函数，用于在表格中显示水果数据
function showFruits() {
    // 1. 通过ID获取到HTML中的表格元素
    const table = document.getElementById("fruits-table");

    // 2. 遍历水果数组中的每一个元素
    fruits.forEach((fruit, index) => {
        // 为每个水果创建一个新的表格行 (

) 用于显示序号 const indexTd = document.createElement("td"); // 创建一个单元格 (

) 用于显示水果名称 const fruitTd = document.createElement("td"); // 将序号和水果名称文本添加到对应的单元格中 indexTd.innerText = index + 1; // 序号从1开始 fruitTd.innerText = fruit; // 将序号单元格和水果名称单元格添加到表格行中 tr.append(indexTd, fruitTd); // 将完整的表格行添加到表格中 table.append(tr); }); } // 页面加载完成后或在特定事件（如按钮点击）时调用此函数 // 这里我们直接调用，使页面加载时即显示表格 showFruits();

代码解析：

const fruits = [...]: 定义了一个包含字符串的数组，这是我们将要展示的数据源。
showFruits() 函数: 封装了所有动态创建表格的逻辑。
- document.getElementById("fruits-table"): 通过 id 获取到我们在 HTML 中定义的表格元素。
- fruits.forEach((fruit, index) => { ... }): 使用 forEach 方法遍历 fruits 数组。fruit 代表当前数组元素的值，index 代表当前元素的索引。
- document.createElement("tr"): 为每个水果创建一个新的表格行元素。
- document.createElement("td"): 创建两个表格数据单元格，一个用于显示序号，另一个用于显示水果名称。
- indexTd.innerText = index + 1;: 将当前元素的索引（加1使其从1开始计数）作为文本内容赋值给序号单元格。
- fruitTd.innerText = fruit;: 将当前水果名称作为文本内容赋值给水果名称单元格。
- tr.append(indexTd, fruitTd): 将这两个创建好的

元素添加到当前的

）添加到 fruits-table 中。

showFruits();: 在脚本加载并执行时立即调用 showFruits 函数，从而在页面加载时就生成并显示表格。如果需要通过按钮点击来触发，可以将此调用放在一个事件监听器中。

4. CSS 样式美化（可选）

为了让表格在视觉上更清晰、更美观，我们可以添加一些基本的 CSS 样式。

/* style.css */
table,
td,
th {
    border: 1px solid #777; /* 设置边框 */
    text-align: center;   /* 文本居中 */
    border-collapse: collapse; /* 合并相邻边框 */
    padding: 8px; /* 内边距 */
}

table {
    width: 80%; /* 表格宽度 */
    margin: 20px auto; /* 居中显示 */
}

th {
    background-color: #f2f2f2; /* 表头背景色 */
}

将上述 CSS 代码保存为 style.css 文件，并在 HTML 文件的

部分通过引入。

5. 完整示例代码

将上述 HTML、JavaScript 和 CSS 代码整合在一起，您将得到一个功能完整的动态表格。

index.html

script.js

const fruits = ['苹果', '橘子', '葡萄', '香蕉', '番石榴', '西瓜', '芒果'];

function showFruits() {
    const table = document.getElementById("fruits-table");

    // 可以在这里添加一个逻辑，如果表格已经有数据行（除了表头），则先清空
    // 避免重复添加，如果每次点击按钮都需要重新生成
    // let rowCount = table.rows.length;
    // for (let i = rowCount - 1; i > 0; i--) { // 从最后一行开始删除，跳过表头
    //     table.deleteRow(i);
    // }

    fruits.forEach((fruit, index) => {
        const tr = document.createElement("tr");
        const indexTd = document.createElement("td");
        const fruitTd = document.createElement("td");

        indexTd.innerText = index + 1;
        fruitTd.innerText = fruit;

        tr.append(indexTd, fruitTd);
        table.append(tr);
    });
}

// 页面加载完成后立即执行
document.addEventListener('DOMContentLoaded', showFruits);

// 如果需要通过按钮点击触发，可以这样设置
// document.getElementById('myButtonId').addEventListener('click', showFruits);

style.css

table,
td,
th {
    border: 1px solid #777;
    text-align: center;
    border-collapse: collapse;
    padding: 8px;
}

table {
    width: 80%;
    margin: 20px auto;
}

th {
    background-color: #f2f2f2;
}

6. 注意事项与最佳实践

性能优化: 对于包含大量数据的数组（例如几百甚至上千行），频繁的 DOM 操作可能会导致性能问题。在这种情况下，可以考虑使用 DocumentFragment 来批量添加元素，减少页面重绘和回流的次数。

// 使用 DocumentFragment 优化
function showFruitsOptimized() {
    const table = document.getElementById("fruits-table");
    const fragment = document.createDocumentFragment(); // 创建文档片段

    fruits.forEach((fruit, index) => {
        const tr = document.createElement("tr");
        const indexTd = document.createElement("td");
        const fruitTd = document.createElement("td");

        indexTd.innerText = index + 1;
        fruitTd.innerText = fruit;

        tr.append(indexTd, fruitTd);
        fragment.append(tr); // 将行添加到文档片段
    });
    table.append(fragment); // 一次性将所有行添加到表格
}

清除旧数据: 如果 showFruits 函数会被多次调用（例如每次点击按钮都重新生成表格），您可能需要先清除表格中已有的数据行，以避免重复添加。可以在 showFruits 函数的开头添加逻辑来删除除表头外的所有行。
错误处理: 确保 document.getElementById("fruits-table") 能够成功获取到元素。如果 ID 不存在，table 将为 null，后续操作会报错。可以在获取元素后进行非空检查。
事件触发: 在本例中，我们使用了 document.addEventListener('DOMContentLoaded', showFruits); 来确保在 DOM 完全加载后执行函数。如果您希望通过按钮点击或其他用户交互来触发表格生成，应将 showFruits() 的调用放在相应的事件监听器中。