使用 J*aScript 动态创建 HTML 表格并填充数组数据

使用 javascript 动态创建 html 表格并填充数组数据

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

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

1. 核心概念

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

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

J*aScript 数组: 存储需要展示的数据。

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

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

2. HTML 结构准备

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

元素，并为其指定一个唯一的 id，以便 J*aScript 可以轻松地获取到它。此外，我们通常会预先定义表格的头部（元素中。

table.append(tr): 将完整的

元素（包含两个

），以明确各列的含义。 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态表格示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>水果列表</h1> <table id="fruits-table"> <tr> <th>序号</th> <th>水果名称</th> </tr> </table> <script src="script.js"></script> </body> </html> 在这个例子中，我们创建了一个 id 为 fruits-table 的表格，并定义了“序号”和“水果名称”两个表头。 3. JaScript 逻辑实现接下来是核心的 JaScript 部分。我们将定义一个数组来存储数据，并编写一个函数来处理表格的动态生成和数据填充。 // 定义一个包含水果名称的数组 const fruits = ['苹果', '橘子', '葡萄', '香蕉', '番石榴', '西瓜', '芒果']; // 定义一个函数，用于在表格中显示水果数据 function showFruits() { // 1. 通过ID获取到HTML中的表格元素 const table = document.getElementById("fruits-table"); // 2. 遍历水果数组中的每一个元素 fruits.forEach((fruit, index) => { // 为每个水果创建一个新的表格行 (<tr>) const tr = document.createElement("tr"); // 创建一个单元格 (<td>) 用于显示序号 const indexTd = document.createElement("td"); // 创建一个单元格 (<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、JaScript 和 CSS 代码整合在一起，您将得到一个功能完整的动态表格。堆友 Alibaba Design打造的设计师全成长周期服务平台，旨在成为设计师的好朋友 759 查看详情 index.html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态表格示例</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>水果列表</h1> <table id="fruits-table"> <tr> <th>序号</th> <th>水果名称</th> </tr> </table> <!-- 假设有一个按钮来触发表格生成，如果不需要，可以直接调用 showFruits() --> <!-- <button onclick="showFruits()">显示水果</button> --> <script src="script.js"></script> </body> </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() 的调用放在相应的事件监听器中。总结通过本教程，您应该已经掌握了如何使用 J*aScript 动态地创建 HTML 表格并填充数组数据。这种技术是前端开发中非常常见的需求，掌握它将大大提高您在处理数据展示时的效率和灵活性。记住，根据实际应用场景，合理选择 DOM 操作方法和进行性能优化，可以构建出响应更快、用户体验更好的网页应用。

），以明确各列的含义。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>水果列表</h1>
    <table id="fruits-table">
        <tr>
            <th>序号</th>
            <th>水果名称</th>
        </tr>
    </table>

    <script src="script.js"></script>
</body>
</html>

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

3. J*aScript 逻辑实现

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

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

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

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

        // 创建一个单元格 (<td>) 用于显示序号
        const indexTd = document.createElement("td");
        // 创建一个单元格 (<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、J*aScript 和 CSS 代码整合在一起，您将得到一个功能完整的动态表格。

堆友

Alibaba Design打造的设计师全成长周期服务平台，旨在成为设计师的好朋友

759 查看详情

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态表格示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>水果列表</h1>
    <table id="fruits-table">
        <tr>
            <th>序号</th>
            <th>水果名称</th>
        </tr>
    </table>

    <!-- 假设有一个按钮来触发表格生成，如果不需要，可以直接调用 showFruits() -->
    <!-- <button onclick="showFruits()">显示水果</button> -->

    <script src="script.js"></script>
</body>
</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() 的调用放在相应的事件监听器中。

总结

通过本教程，您应该已经掌握了如何使用 J*aScript 动态地创建 HTML 表格并填充数组数据。这种技术是前端开发中非常常见的需求，掌握它将大大提高您在处理数据展示时的效率和灵活性。记住，根据实际应用场景，合理选择 DOM 操作方法和进行性能优化，可以构建出响应更快、用户体验更好的网页应用。

以上就是使用 J*aScript 动态创建 HTML 表格并填充数组数据的详细内容，更多请关注其它相关文章！

# 放在 # seo优化文章原创范文 # 抖音seo工具公司排名 # 福山网站优化推广公司 # 知识付费营销推广方式 # 湖南SEO优化营商 # 网站建设有哪些收益方式 # 西宁网站建设框架公司 # 普陀营销推广平台官网首页 # 机器人推广营销方案范文 # 网站的软文推广是什么 # 组中 # 结构化 # 中非 # 如何使用 # 中文网 # css # 遍历 # 加载 # 创建一个 # 单元格 # 重绘 # 回流 # 前端开发 # 苹果 # app # 前端 # js # html # java # javascript

相关栏目：【 Google疑问12 】【 Facebook疑问10 】【优化推广96088 】【技术知识133117 】【 IDC资讯59369 】【网络运营7196 】【 IT资讯61894 】

2025-12-07

SQL多表关联如何理解_核心原理解析助你掌握关键方法【教程】 SQL多表连接如何理解_JOIN关联关系详细步骤解析【指导】 SQL多表连接结果异常怎么办_JOIN条件排查方法解析【指导】 SQL索引下推是什么_ICP机制性能提升原理【教程】 SQL跨表统计怎么写_重要技巧总结提升查询效率【技巧】 SQL注入如何防护_完整逻辑拆解助力系统化掌握【技巧】 SQL上传文件信息建模方法_SQL存储文件元数据方案 SQL多语种存储方案设计_SQL字符集选择策略 SQL字符串处理如何编写_重要技巧总结提升查询效率【教学】 SQL去重查询怎么实现_优化思路讲解帮助高效处理数据【技巧】 SQL统计复购用户怎么做_多次行为分析SQL思路【教程】 SQL字符串处理如何编写_优化思路讲解帮助高效处理数据【教程】 SQL动态字段解析技巧_SQL解析JSON多层字段 SQL线上慢SQL如何治理_规范与工具实践总结【技巧】 SQL表结构如何演进_兼容老数据设计思路【教程】 SQL排序规则如何设置_ORDERBY排序原理与性能说明【指导】 SQL去重查询怎么实现_真实案例解析强化复杂查询思维【教学】 SQL按字段范围分批处理_SQL避免长时间锁表 SQL统计不同字段组合数量_多列聚合查询技巧【技巧】 SQL多字段去重怎么处理_GROUPBY去重思路说明【教学】

了解您产品搜索量及市场趋势，制定营销计划

同行竞争及网站分析保障您的广告效果

点击免费数据支持

提交您的需求，1小时内享受我们的专业解答。

运城市盐湖区信雨科技有限公司

运城市盐湖区信雨科技有限公司是一家深耕海外推广领域十年的专业服务商，作为谷歌推广与Facebook广告全球合作伙伴，聚焦外贸企业出海痛点，以数字化营销为核心，提供一站式海外营销解决方案。公司凭借十年行业沉淀与平台官方资源加持，打破传统外贸获客壁垒，助力企业高效开拓全球市场，成为中小企业出海的可靠合作伙伴。