首页 > 文章 > 前端

JavaScript动态生成表格并填充数组数据

时间：2025-12-14 21:36:46 218浏览收藏

推广推荐

支持 PC / 移动端，安全直达

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript动态生成表格填充数组数据》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

使用JavaScript动态创建HTML表格并填充数组数据

本文详细介绍了如何利用JavaScript动态创建HTML表格，并将数组中的数据逐一填充到表格的每个单元格中。通过DOM操作，我们将学习如何获取现有表格、遍历数据、创建行和单元格，最终构建一个结构清晰、内容丰富的表格。教程包含完整的代码示例和步骤解析，帮助读者掌握前端数据展示的核心技巧。

在现代Web开发中，动态地展示数据是常见的需求。当数据源是一个JavaScript数组时，我们经常需要将其内容以表格形式呈现在网页上。本教程将指导您如何使用纯JavaScript（不依赖任何库）实现这一功能，包括准备HTML结构、应用基本CSS样式以及编写核心JavaScript逻辑。

1. HTML 结构准备

首先，我们需要在HTML页面中创建一个基础的表格容器。这个容器将包含表格的头部，并提供一个唯一的ID，以便JavaScript能够准确地找到并操作它。我们还会添加一个按钮，用于触发表格的生成。

<!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>
    <button id="generateTableBtn">生成水果表格</button>

    <table id="fruits-table">
        <thead>
            <tr>
                <th>索引</th>
                <th>水果名称</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格数据将动态添加到这里 -->
        </tbody>
    </table>

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

在上述HTML代码中：

我们创建了一个带有id="generateTableBtn"的按钮，用户点击它将触发表格的生成。

id="fruits-table"的元素是我们的目标容器。

和、标签是我们将动态插入数据行的地方，这有助于保持表格结构的语义化。

2. CSS 样式（可选但推荐）

为了让表格在视觉上更清晰，我们可以添加一些基本的CSS样式。这些样式将为表格、单元格和表头添加边框，并居中对齐文本。

创建一个style.css文件：

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

table {
    width: 100%;
    border-collapse: collapse; /* 合并边框 */
    margin-top: 20px;
}

table,
td,
th {
    border: 1px solid #777; /* 设置边框 */
    text-align: center; /* 文本居中 */
    padding: 8px; /* 单元格内边距 */
}

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

3. JavaScript 核心逻辑

现在，我们来编写核心的JavaScript代码，它将负责从数组中读取数据，并将其动态地插入到HTML表格中。

创建一个script.js文件：

// 1. 定义数据数组
const fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];

// 2. 获取HTML元素
const generateTableBtn = document.getElementById('generateTableBtn');
const tableBody = document.querySelector('#fruits-table tbody'); // 获取表格的tbody

// 3. 定义生成表格数据的函数
function populateFruitsTable() {
    // 清空现有表格内容，防止重复添加
    tableBody.innerHTML = ''; 

    // 遍历水果数组，为每个水果创建一行
    fruits.forEach((fruit, index) => {
        // 创建表格行 (<tr>)
        const tr = document.createElement('tr');

        // 创建索引单元格 (<td>)
        const indexTd = document.createElement('td');
        indexTd.innerText = index + 1; // 显示从1开始的索引

        // 创建水果名称单元格 (<td>)
        const fruitTd = document.createElement('td');
        fruitTd.innerText = fruit;

        // 将单元格添加到行中
        tr.appendChild(indexTd);
        tr.appendChild(fruitTd);

        // 将行添加到表格的tbody中
        tableBody.appendChild(tr);
    });
}

// 4. 为按钮添加事件监听器，当点击时调用 populateFruitsTable 函数
generateTableBtn.addEventListener('click', populateFruitsTable);

// (可选) 页面加载时自动生成表格
// document.addEventListener('DOMContentLoaded', populateFruitsTable);

代码解析：

数据数组 (fruits): 这是一个简单的字符串数组，包含了我们要展示的水果名称。
获取HTML元素:
- generateTableBtn: 获取触发表格生成的按钮元素。
- tableBody: 获取ID为fruits-table的表格内的

元素。我们将把所有动态生成的行插入到这个中，而不是直接插入到

定义了表格的列头，这部分通常是静态的。

，这更符合HTML语义。

populateFruitsTable() 函数:

tableBody.innerHTML = '';: 在每次生成表格前，我们首先清空

的内容。这确保了如果用户多次点击按钮，表格不会重复添加数据。

fruits.forEach((fruit, index) => { ... });: 使用forEach方法遍历fruits数组。对于数组中的每个元素，回调函数都会被执行，并接收到当前元素的值 (fruit) 和它的索引 (index)。

document.createElement('tr'): 创建一个新的

（表格行）元素。

document.createElement('td'): 创建两个新的

元素中。

tableBody.appendChild(tr);: 最后，将完整的

元素（包含其元素中，从而在页面上显示出来。

事件监听器:

generateTableBtn.addEventListener('click', populateFruitsTable);: 为“生成水果表格”按钮添加一个点击事件监听器。当按钮被点击时，populateFruitsTable函数就会被执行，从而动态生成表格。

4. 完整代码示例

将上述HTML、CSS和JavaScript代码分别保存到index.html、style.css和script.js文件中，并在浏览器中打开index.html，点击按钮即可看到效果。

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>
    <button id="generateTableBtn">生成水果表格</button>

    <table id="fruits-table">
        <thead>
            <tr>
                <th>索引</th>
                <th>水果名称</th>
            </tr>
        </thead>
        <tbody>
            <!-- 表格数据将动态添加到这里 -->
        </tbody>
    </table>

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

style.css

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}

h1 {
    color: #333;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    margin-bottom: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
}

button:hover {
    background-color: #0056b3;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

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

th {
    background-color: #f2f2f2;
}

script.js

const fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];

const generateTableBtn = document.getElementById('generateTableBtn');
const tableBody = document.querySelector('#fruits-table tbody');

function populateFruitsTable() {
    tableBody.innerHTML = ''; 

    fruits.forEach((fruit, index) => {
        const tr = document.createElement('tr');

        const indexTd = document.createElement('td');
        indexTd.innerText = index + 1; 

        const fruitTd = document.createElement('td');
        fruitTd.innerText = fruit;

        tr.appendChild(indexTd);
        tr.appendChild(fruitTd);

        tableBody.appendChild(tr);
    });
}

generateTableBtn.addEventListener('click', populateFruitsTable);

5. 注意事项与扩展

性能优化: 对于包含大量数据的数组（例如，数千行），频繁地操作DOM可能会影响性能。在这种情况下，可以考虑以下优化策略：
- 使用 DocumentFragment: 先将所有新创建的行添加到DocumentFragment中，然后一次性将DocumentFragment添加到

中。这样可以减少DOM重绘和回流的次数。

构建HTML字符串: 将所有行和单元格作为HTML字符串拼接起来，然后一次性设置tableBody.innerHTML。这种方法通常更快，但需要注意字符串拼接的安全性（防止XSS攻击）。

数据结构: 本教程使用了一个简单的字符串数组。如果您的数据是对象数组（例如 [{name: 'apple', color: 'red'}, ...]），您可以根据对象的属性来填充不同的单元格。

错误处理: 在实际应用中，您可能需要检查generateTableBtn或tableBody是否成功获取到元素，以避免在元素不存在时抛出错误。

可访问性 (Accessibility): 确保您的表格在语义上正确，并考虑为屏幕阅读器提供必要的aria属性，尤其是在表格内容复杂时。

总结

通过本教程，您已经掌握了如何使用JavaScript动态地创建HTML表格并填充数组数据。核心在于利用DOM操作方法（如document.createElement()、appendChild()和innerText）来构建和修改页面元素。这种技术是前端开发中展示列表数据的基础，理解并熟练运用它将极大地提升您构建动态Web应用的能力。

好了，本文到此结束，带大家了解了《JavaScript动态生成表格并填充数组数据》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！

最新阅读

更多>

文章 · 前端 | 5小时前 |

JavaScript优化：代码分割与懒加载技巧

171 收藏
文章 · 前端 | 5小时前 |

动态规划算法设计与实战应用

435 收藏
文章 · 前端 | 5小时前 |

Node.jsRedis高效并发与排队实现方法

193 收藏
文章 · 前端 | 5小时前 | html 浏览器

HTML代码怎么在浏览器运行【教程】

417 收藏
文章 · 前端 | 5小时前 | HTML入门指南

HTML切换div显示隐藏的常用方法有多种，主要依赖于CSS和JavaScript的配合。以下是几种常见方式：✅1.使用CSSdisplay属性（纯前端控制）实现方式：通过JavaScript切换div的display属性为none或block。示例代码：<!DOCTYPEhtml><html><head><title>切换Div显示隐藏</t

140 收藏
文章 · 前端 | 5小时前 |

前端倒计时与定时任务实现技巧

367 收藏
文章 · 前端 | 5小时前 | html搭建

Linux下用gedit写HTML怎么保存正确

187 收藏
文章 · 前端 | 5小时前 |

JavaScript解构赋值高级用法解析

429 收藏
文章 · 前端 | 5小时前 | html文件

HTML显示变量的实现方法有哪些

440 收藏
文章 · 前端 | 6小时前 |

flex容器首项不靠左怎么调整

327 收藏
文章 · 前端 | 6小时前 |

CSS菜单平滑展开技巧

317 收藏
文章 · 前端 | 6小时前 |

Less嵌套与运算实战技巧详解

191 收藏

课程推荐

更多>

前端进阶之JavaScript设计模式

设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。

立即学习 543次学习
GO语言核心编程课程

本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。

立即学习 516次学习
简单聊聊mysql8与网络通信

如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让

立即学习 500次学习
JavaScript正则表达式基础与实战

在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。

立即学习 487次学习
从零制作响应式网站—Grid布局

本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。

立即学习 485次学习

（表格数据单元格）元素，一个用于索引，一个用于水果名称。 indexTd.innerText = index + 1;: 将数组索引加1作为单元格的文本内容，使其从1开始计数，更符合用户习惯。 fruitTd.innerText = fruit;: 将当前水果名称作为另一个单元格的文本内容。 tr.appendChild(indexTd); tr.appendChild(fruitTd);: 将创建的两个	元素添加到
子元素）添加到之前获取到的