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

程序猿 • 2025年12月23日 17:00:47 • 用户投稿

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

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

1. 核心概念

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

HTML 结构: 提供一个基础的元素作为容器，通常包含表头。JavaScript 数组: 存储需要展示的数据。DOM 操作: 使用 JavaScript 提供的 document 对象方法来创建、修改和添加 HTML 元素（如 createElement, getElementById, append, innerText 等）。循环迭代: 遍历数组，为每个数据项生成对应的表格行和单元格。

2. HTML 结构准备

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

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

），以明确各列的含义。

立即学习“Java免费学习笔记（深入）”；

            动态表格示例        水果列表
                        序号             水果名称

在这个例子中，我们创建了一个 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 tr = document.createElement("tr");        // 创建一个单元格 () 用于显示序号        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): 将这两个创建好的元素添加到当前的元素中。table.append(tr): 将完整的元素（包含两个）添加到 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() 的调用放在相应的事件监听器中。

总结

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

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1603195.html

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

413.8K 文章

0 评论

2 粉丝

这个人很懒，什么都没有留下～

Angular Material 轮廓输入框占位符文本截断与浏览器兼容性指南

上一篇 2025年12月23日 17:00:41

网页怎么运行代码html_网页运行代码html方法【教程】

下一篇 2025年12月23日 17:00:49

Java ParallelStream线程池管理：定制并发与I/O优化

本文深入探讨了Java ParallelStream的线程池管理，特别是如何在I/O密集型任务（如数据库查询）中定制其并发行为。我们将介绍如何通过自定义ForkJoinPool来限制ParallelStream的线程数量，并强调在处理数据库操作时，除了线程池大小，还需关注数据库连接数等关键资源，并讨…

程序猿
2026年9月25日 • 用户投稿
0000
sublime怎么连接sftp服务器_sublime SFTP服务器连接教程

首先安装SFTP插件并配置sftp-config.json文件，设置host、user、remote_path等参数，保存后可通过右键菜单上传下载文件，支持自动同步与SSH密钥认证，注意避免密码泄露和编码问题。使用Sublime Text连接SFTP服务器，可以通过安装SFTP插件实现文件的远程编…

程序猿
2026年9月25日 • 用户投稿
0000
抖音巨量千川账户余额怎么提现？抖音巨量千川的钱怎么退

在当今这个短视频盛行的时代，抖音无疑成为了许多人展示才华、分享生活的舞台。而抖音旗下的巨量千川广告平台，更是让许多商家和创作者通过广告实现了商业变现。在使用巨量千川的过程中，如何提取账户余额成为了一个让人头疼的问题。今天，就让我来为大家详细解析一下抖音巨量千川账户余额提现的全过程，让你轻松提取，安全…

程序猿
2026年9月25日 • 用户投稿
0000
控制Java ParallelStream线程池大小与并发优化：策略与最佳实践

本文探讨如何有效管理Java ParallelStream的线程池大小，特别是在涉及数据库查询等I/O密集型操作时。我们将介绍通过自定义ForkJoinPool来限制ParallelStream线程的方法，并强调在处理I/O任务时，结合CompletableFuture与专用执行器的重要性。同时，文…

程序猿
2026年9月25日 • 用户投稿
0000
苹果手机桌面图标怎么设置大小

将图标大小调整为“标准”或“大”：1. 打开“设置”；2. 选择“显示与亮度”；3. 找到“图标大小”并点击；4. 选择所需的大小；5. 更改立即生效。如何调整苹果手机桌面图标大小步骤： 1. 进入“设置” 在您的 iOS 设备上，点击“设置”图标。 2. 选择“显示与亮度” 向下滚动并点击“显…

程序猿
2026年9月25日 • 用户投稿
0000
iPhone 17系列包揽第38周手机销量前三荣耀X70第四

近日，有数码博主公布了2025年第38周国内手机市场销量Top20榜单。数据显示，苹果成为当周最大赢家，共五款机型进入榜单，其中刚发布的新机iPhone 17系列三款产品更是强势包揽销量榜前三名。 iPhone 17 Pro系列榜单具体排名如下：豆包大模型字节跳动自主研发的一系列大型语言模型 …

程序猿
2026年9月25日 • 用户投稿
0000
Java Stream API：高效处理列表数据，按组合键去重并选择最新记录

本文详细介绍了如何利用Java Stream API，特别是Collectors.toMap，对包含重复条目的对象列表进行高级过滤。教程将演示如何根据对象的多个字段（如姓名组合）确定唯一性，并在出现重复时，根据特定字段（如日期）选择最新或最符合条件的记录，从而实现数据的高效聚合与筛选。业务场景与问…

程序猿
2026年9月25日 • 用户投稿
1000
微软确认Windows 11和10打印问题，HP Smart App引发疑虑

N软网报道，微软近期确认，Windows 11与10用户正经历一系列令人头疼的打印故障。问题的核心在于HP Smart App，其相关文档已在官方Windows健康仪表板中更新，详细描述了这一异常状况。据反馈，HP Smart App可能会未经授权地侵入电脑，更改打印机名称及图标设置，导致诸如点击打…

程序猿
2026年9月25日 • 用户投稿
1000
悟空浏览器如何屏蔽图片加载_悟空浏览器无图模式开启方法

1、可通过设置菜单开启无图模式，进入浏览器设置后启用“节省流量”功能；2、可临时切换当前页面为无图浏览，点击底部操作栏的“省流模式”按钮实现快速切换；3、高级用户能通过自定义脚本，在用户脚本管理中添加CSS代码隐藏所有图片。如果您在使用悟空浏览器时希望减少数据流量消耗或提升网页加载速度，可以选择关…

程序猿
2026年9月25日 • 用户投稿
2000
苹果手机桌面有两个一样的图标

iOS 设备上桌面出现双重图标可能是以下原因导致的：已安装多个版本；多用户帐户；系统错误；小部件；文件夹。解决方案包括删除旧版本、管理用户帐户、重启设备、删除小部件或整理文件夹。苹果手机桌面上的双重图标在 iOS 设备上，用户可能会遇到桌面出现同一应用程序的两个图标的情况。这种情况可能由以下原因…

程序猿
2026年9月25日 • 用户投稿
1000
sublime如何高亮vue文件语法 _sublime Vue语法高亮方法

安装Vue Syntax Highlight插件可让Sublime Text正确高亮.vue文件，支持template、script和style区块的语法着色，提升编辑体验。要让 Sublime Text 正确高亮 Vue 文件语法，关键是将 .vue 文件识别为支持的语法格式。Vue 单文件组件…

程序猿
2026年9月25日 • 用户投稿
2000
快手如何加入快接单_快手加入快接单的条件与流程

要开通快手快接单功能，需先满足粉丝门槛：加入工会者需超10万粉丝，未加入者需达30万以上。达标后通过创作者中心或服务列表查看入口，完善信息并等待审核，通过后可在任务广场浏览并承接广告任务，按时完成推广内容以实现变现。如果您希望在快手平台通过发布广告内容实现收益变现，但发现无法找到或开通快接单功能，…

程序猿
2026年9月25日 • 用户投稿
0000
夸克怎么设置字体大小_网页浏览字体调整方法

1、打开夸克浏览器点击菜单进入设置，选择字体大小并拖动滑块调整至合适尺寸，网页将自动重绘；2、浏览时可用双指缩放手势临时调节当前页面字体大小；3、在手机系统设置中调整辅助功能里的字体大小，并在夸克中开启同步选项以实现全局一致阅读体验。如果您在使用夸克浏览器时发现网页文字过小或过大，影响阅读体验，可…

程序猿
2026年9月25日 • 用户投稿
1000
用户投稿

Hadoop MapReduce实现累计电量数据的最大小时耗电量计算

本文详细介绍了如何使用Hadoop MapReduce从累计电量读数中计算出所有住户和所有日期内的最大小时耗电量。教程将分析原始代码的问题，包括自定义Writable类的序列化错误和逻辑缺陷，并提供一个基于两阶段MapReduce任务的完整解决方案，涵盖自定义数据类型、Mapper、Reducer的…

程序猿
2026年9月25日
0000
用户投稿

苹果手机如何更改语言设置

一、进入语言设置界面开启您的iPhone，点击主屏幕上的“设置”应用图标。进入设置后，向下滑动屏幕，找到并进入“通用”选项。在通用菜单中，选择“语言与地区”，即可进入语言设置页面。二、添加新语言在“语言与地区”界面中，您可以看到当前系统使用的语言。若需添加其他语言，点击“iPhone 语言”下…

程序猿
2026年9月25日
0000
apple苹果官网注册id

苹果官网注册 Apple ID 的步骤：访问 Apple 官网（https://www.apple.com/）点击右上角“账户”->“创建你的 Apple ID”输入个人信息（姓名、电子邮件地址、密码）验证电子邮件地址回答安全问题同意条款和条件点击“继续”完成注册如何在苹果官网注册 Appl…

程序猿
2026年9月25日 • 用户投稿
0000
sublime怎么快速切换文件语法类型_sublime修改文件语言类型的方法

点击状态栏语言名可快速切换语法类型，立即应用高亮规则；2. 用Ctrl+Shift+P或Cmd+Shift+P打开命令面板，输入Set Syntax选择目标语言；3. 通过“Open all with current extension as…”设置默认语法关联，或手动编辑配置文件，使特…

程序猿
2026年9月25日 • 用户投稿
2000
Stable Diffusion精炼关键词公式：构图+主体+细节+风格+画质

stable diffusion关键词公式的核⼼是通过结构化描述提升图像生成的精准度和表现力，其核心要素包括构图、主体、细节、风格和画质。1. 构图决定画面布局与视角，涵盖视角（如全身像、特写）、取景范围（如黄金分割）、景深（如浅景深突出主体）、光线（如伦勃朗光）和透视（如一点透视）；2. 主体是画…

程序猿
2026年9月25日 • 用户投稿
0000
公众号文章如何插入图片_在公众号文章中插入图片的正确方法

插入图片可提升公众号文章可读性与美观度，常用方法有四种：一、通过微信后台直接上传，操作简单；二、使用秀米等第三方工具排版后同步，功能丰富；三、用Markdown编辑并转HTML导入，适合高效写作；四、借助壹伴等工具批量上传，提升多图处理效率。如果您在编辑公众号文章时希望增强内容的可读性和吸引力，插…

程序猿
2026年9月25日 • 用户投稿
0000
苹果手机桌面图标删不掉

iOS 系统中桌面图标无法删除的原因包括：预装应用、家长控制、MDM 限制、特殊文件夹、故障或错误。解决方法包括：检查家长控制、MDM 限制、重启手机、使用第三方应用和联系 Apple 支持。苹果手机桌面图标为何无法删除？ iOS 系统中，桌面图标无法删除通常是由于以下原因： 1. 预装应用苹果…

程序猿
2026年9月25日 • 用户投稿
0000