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

本文详细介绍了如何利用javascript动态地创建html表格，并使用数组数据填充表格的每个单元格。教程涵盖了从html结构准备、css样式设置到核心javascript逻辑实现的完整过程，包括获取dom元素、遍历数组、创建行和单元格，以及将数据插入表格。通过示例代码，读者将学习如何高效且结构化地实现这一常见前端需求。

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

在现代Web开发中，经常需要根据后端数据或用户交互动态地在前端页面上展示信息。其中一个常见需求是根据JavaScript数组中的数据动态生成HTML表格。本教程将详细指导您如何使用纯JavaScript实现这一功能，确保生成的表格结构清晰、数据准确。

1. HTML结构准备

首先，我们需要在HTML页面中创建一个基础的表格容器。这个容器将作为JavaScript动态添加行和单元格的目标。为了方便JavaScript访问，我们为其指定一个唯一的id。同时，为了表格的语义化和可读性，我们通常会预先定义好表头。

            动态生成表格        水果列表
                        索引             水果名称

在上述HTML代码中，我们创建了一个id为fruits-table的

元素，并为其添加了包含“索引”和“水果名称”的表头行。

2. CSS样式设置

为了让表格在页面上呈现出良好的视觉效果，我们可以添加一些基本的CSS样式。这些样式将应用于表格、表头和数据单元格。

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

/* 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代码为表格、单元格和表头添加了边框，使文本居中，并设置了内边距和背景色，提升了表格的可读性。

3. JavaScript核心逻辑

现在，我们将编写JavaScript代码来实现动态生成表格的核心功能。我们将定义一个数组来存储数据，并创建一个函数来处理表格的创建和数据填充。

// script.js// 存储水果数据的数组var fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];/** * showFruits 函数： * 动态地从 fruits 数组中获取数据，并将其添加到 HTML 表格中。 */function showFruits() { // 1. 通过 ID 获取到 HTML 页面中预设的表格元素 const table = document.getElementById("fruits-table"); // 2. 遍历 fruits 数组中的每一个元素 fruits.forEach((fruit, index) => { // 3. 为每个水果数据创建一个新的表格行 () const tr = document.createElement("tr"); // 4. 创建一个单元格 () 用于显示索引 const indexTd = document.createElement("td"); // 设置索引单元格的文本内容 indexTd.innerText = index; // 5. 创建另一个单元格 () 用于显示水果名称 const fruitTd = document.createElement("td"); // 设置水果名称单元格的文本内容 fruitTd.innerText = fruit; // 6. 将索引单元格和水果名称单元格添加到当前行 () 中 tr.append(indexTd, fruitTd); // 7. 将创建好的行 () 添加到表格 () 中 table.append(tr); });}// 在页面加载完成后或通过某个事件（如按钮点击）调用此函数// 这里我们直接调用，以便在页面加载时就显示表格showFruits();

代码解析：

数据定义： fruits 数组包含了我们将要展示的水果名称。获取表格元素： document.getElementById(“fruits-table”) 通过ID获取到我们预设的表格容器。遍历数组： fruits.forEach((fruit, index) => { … }) 遍历fruits数组。fruit是当前元素的值，index是当前元素的索引。创建行 ()： document.createElement(“tr”) 创建一个新的表格行元素。创建单元格 ()：document.createElement(“td”) 创建两个新的表格数据单元格。indexTd.innerText = index; 将当前元素的索引作为第一个单元格的内容。fruitTd.innerText = fruit; 将当前水果名称作为第二个单元格的内容。追加单元格到行： tr.append(indexTd, fruitTd) 将创建的两个单元格追加到当前行tr中。追加行到表格： table.append(tr) 将填充好数据的行追加到表格table中。函数调用： showFruits(); 在脚本加载后立即执行此函数，从而在页面加载时就生成并显示表格。如果需要通过按钮点击等交互触发，可以将此调用放入事件监听器中。

4. 完整示例

将上述HTML、CSS和JavaScript代码分别保存到index.html、style.css和script.js文件中，并在浏览器中打开index.html，您将看到一个根据fruits数组动态生成的表格。

注意事项

性能优化： 对于包含大量数据（例如数千行）的表格，频繁地操作DOM可能会导致性能问题。在这种情况下，可以考虑使用DocumentFragment来批量操作DOM，或者使用虚拟滚动等技术。清除现有数据： 如果showFruits函数可能被多次调用（例如，每次点击按钮都刷新表格），您可能需要在添加新数据之前清除旧数据。可以通过 table.querySelectorAll(‘tr:not(:first-child)’).forEach(row => row.remove()); 来移除除表头外的所有行。错误处理： 在实际应用中，您应该添加错误处理机制，例如检查table元素是否成功获取，以防止因ID拼写错误等问题导致脚本失败。数据源： 本教程使用硬编码的数组数据。在实际项目中，数据通常来自API请求或其他外部源。可访问性： 考虑为表格添加

、

等语义化标签，并为单元格添加scope属性，以提高表格的可访问性。

总结

通过本教程，您已经掌握了使用JavaScript动态生成HTML表格并填充数组数据的基本方法。这种技术是前端开发中非常常见的需求，理解其核心逻辑对于构建交互式和数据驱动的Web应用至关重要。通过灵活运用document.createElement()和Element.append()等DOM操作方法，您可以高效地管理和展示页面上的动态内容。

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

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

app apple c++css go html java javascript js 前端前端开发后端浏览器编码

打赏

微信扫一扫

支付宝扫一扫

0 0

关于作者

程序猿签约作者

414.1K 文章

0 评论

2 粉丝

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

pycharm中html怎么运行_pycharm运行html文件步骤【教程】

上一篇 2025年12月23日 16:48:45

React 硬编码登录认证教程：从表单处理到类型匹配深度解析

下一篇 2025年12月23日 16:48:59

用户投稿

Golang使用gRPC拦截器处理请求示例

使用gRPC拦截器可统一处理日志、认证等逻辑，无需修改业务代码。2. 一元拦截器通过grpc.UnaryServerInterceptor实现，用于记录请求耗时与日志。3. 流式拦截器通过grpc.StreamServerInfo处理流式RPC调用。4. 在grpc.NewServer时注册拦截器选…

程序猿
2026年5月10日
0000
用户投稿

如何使用CSS在移动端实现小标签效果并确保安卓和苹果设备上显示一致？

移动端CSS小标签效果实现及跨平台一致性在移动端开发中，精确还原设计稿中的小标签效果，特别是文字与边框的完美居中，常常面临挑战，不同设备的显示差异也令人头疼。本文将分享两种CSS方法，确保您的标签在安卓和iOS设备上都能一致显示。目标效果：边框内文字水平和垂直居中。问题：移动端垂直居中效果不理…

程序猿
2026年5月10日
0000
用户投稿

HTML结构优化：高效移除标签内的标签

本教程详细介绍了如何通过编程方式移除HTML文档中嵌套在“标签内的“标签，从而优化HTML结构。文章提供了纯JavaScript（适用于浏览器环境）和Node.js（结合`jsdom`库）两种实现方案，并附带示例代码和关键注意事项，帮助开发者实现更简洁、语义化的网页内容。 HTML结构…

程序猿
2026年5月10日
0000
用户投稿

优化 Nextjs 应用性能的经过验证的技巧 ⚡️

优化 web 应用程序的性能对于提供快速、流畅的用户体验至关重要。使用 next.js 这个强大的 react 框架，您可以利用许多内置功能来提高应用程序的速度和效率。以下十个关键策略可帮助您的 next.js 应用获得最佳性能： 1. 仅加载您需要的 javascript 和 css 为了避免…

程序猿
2026年5月10日
0000
用户投稿

深入探究C++框架中的线程和并发处理

线程和并发处理是c++++框架中提高应用程序性能的关键技术，利用std::thread类可轻松创建和管理线程。通过实战案例，本指南展示如何并行计算数组和的步骤：创建与处理器内核数量相同的线程。计算每个线程处理的数组片段大小。创建线程并并行计算和。等待所有线程完成。计算最终结果并打印。深入探究C++…

程序猿
2026年5月10日
0000
HTML怎么添加固定背景？

要实现html固定背景，需使用css的background-attachment: fixed属性。具体步骤为：1. 准备合适的背景图片，注意大小与质量；2. 编写html结构并引入css文件；3. 在css中设置background-image指定图片路径，配合background-attachm…

程序猿
2026年5月10日 • 用户投稿
0000
用户投稿

Go并发模式：理解Fan-In与Goroutine的异步行为

本文深入探讨Go语言并发编程中fanIn模式下的异步行为。通过一个经典的Go Concurrency示例，解释了为何在初步观察时，goroutine间的通信可能看似同步。文章揭示了这种现象的根本原因在于观察窗口不足，并提供了修改方案，展示如何通过延长观察时间来清晰地展现goroutine的非同步执行…

程序猿
2026年5月10日
0000
用户投稿

解决Next.js本地字体在Vercel部署时解析失败的问题

本文旨在解决Next.js应用在使用next/font/local引入本地字体时，在本地开发环境运行正常，但在Vercel部署时出现“Module not found”错误的问题。核心解决方案在于遵循严格的文件和目录命名规范，即避免在字体文件或其所在目录的名称中使用空格和大写字母，以确保跨平台的文件…

程序猿
2026年5月10日
0000
用户投稿

PHP框架怎么连接数据库_PHP框架数据库连接配置与ORM使用指南

主流PHP框架通过配置文件设置数据库连接信息，并借助ORM实现高效数据操作。Laravel在.env和config/database.php中配置，使用Eloquent模型进行增删改查；Symfony通过DATABASE_URL定义DSN，结合Doctrine实体管理器操作数据；CodeIgnite…

程序猿
2026年5月10日
0000
用户投稿

怎么在微信上运行html代码_微信运行html代码方法【指南】

答案是通过将HTML部署为公网链接或使用在线工具生成可访问网址，再在微信中打开链接来间接实现HTML页面展示。具体可通过GitHub Pages等平台托管网页、利用小程序web-view组件加载、或用JSBin等在线编辑器生成预览链接发送至微信查看，注意兼容性与安全限制。微信本身不支持直接运行HT…

程序猿
2026年5月10日
4000
用户投稿

HTML动态内容加载漏洞怎么测试_AJAX动态加载内容潜在漏洞测试流程

识别AJAX加载内容中的XSS漏洞，需结合工具与人工分析，首先通过开发者工具观察XHR请求与响应，重点检查服务端返回的HTML、JSON数据是否包含用户可控内容且未充分编码；若响应被innerHTML、eval等高危函数处理，则存在DOM型XSS风险；测试时应在输入点注入典型payload（如），触…

程序猿
2026年5月10日
0000
用户投稿

如何让网页在缩放时始终充满整个窗口？

网页自适应，完美应对缩放操作许多网页应用都需要适应各种屏幕尺寸和用户缩放比例。当用户调整浏览器缩放比例时，页面元素可能会错位或部分内容被遮挡，影响用户体验。本文提供解决方案，确保页面内容始终充满整个浏览器窗口，无论用户如何缩放。问题：浏览器缩放后，页面高度变化导致内容显示不完整。我们需要一种…

程序猿
2026年5月10日
0000
用户投稿

Golang全栈开发实践前后端分离方案

Golang可实现前后端分离全栈开发，后端用Gin等框架提供RESTful或GraphQL API，前端用React/Vue等框架构建界面，通过JSON交互，JWT实现认证，CORS处理跨域，Docker部署，发挥Golang高性能优势。前后端分离，用Golang做全栈？当然可以！核心在于API的…

程序猿
2026年5月10日
0000
用户投稿

Golang如何优化正则表达式匹配性能_Golang regexp匹配性能提升实践详解

答案：Go中正则性能瓶颈多因使用不当，优化需避免回溯、预编译、优先字符串操作并限制输入。在Go语言中，regexp 包提供了强大的正则表达式支持，但在高并发或高频匹配场景下，正则性能可能成为瓶颈。很多开发者发现，某些看似简单的正则表达式会导致CPU占用飙升或响应延迟增加。问题往往不在于Go本身，而…

程序猿
2026年5月10日
0000
用户投稿

Laravel与jQuery动态表单提交：解决输入值丢失的常见陷阱

本教程旨在解决Laravel应用中，通过jQuery动态添加的表单输入字段无法被正确提交的问题。核心原因是HTML 调试利器 dd()：在Laravel开发中，dd($request->all()) 是一个极其有用的调试工具，它可以让你清晰地看到后端实际接收到的所有请求数据，从而快速定位问题…

程序猿
2026年5月10日
0000
用户投稿

html滚动条滚动位置怎么记忆_html滚动条滚动状态保存方法

答案：使用localStorage或sessionStorage保存滚动位置可提升用户体验。具体步骤包括监听scroll事件获取scrollTop，通过beforeunload保存位置，load时恢复；SPA中可用路由钩子如Vue的activated/deactivated按路径存储；建议防抖优化、…

程序猿
2026年5月10日
0000
用户投稿

JavaScript中的服务端渲染（SSR）有哪些实现方案？

Next.js、Nuxt.js和SvelteKit是主流SSR框架，基于Node.js在服务端渲染HTML以提升首屏速度与SEO；可通过Express等手动集成react-dom/server或@vue/server-renderer实现更灵活控制；React 18支持流式渲染与渐进hydratio…

程序猿
2026年5月10日
0000
用户投稿

JavaScript 简易计算器常见错误与调试指南

本文旨在解决javascript简易计算器中常见的运算符失效问题，特别是计算器只执行加法运算的错误。文章将深入剖析导致该问题的两个核心原因：用户输入运算符变量被错误覆盖，以及条件判断中误用赋值运算符而非比较运算符。通过详细的代码示例和修正，帮助开发者构建功能正确的计算器，并强调javascript中…

程序猿
2026年5月10日
1000
用户投稿

JavaScript如何实现真正的私有类字段？

JavaScript实现真正私有类字段的官方推荐方式是使用#前缀语法，如#balance在类外部无法访问，确保了语言层面的强封装性，而WeakMap等旧方案因需外部存储且不够直观而受限。 JavaScript实现真正私有类字段，最直接且官方推荐的方式是使用ES2022引入的#前缀语法。这种语法在语言…

程序猿
2026年5月10日
1000
用户投稿

PHP如何实现一个基本的MVC框架_PHP MVC框架搭建步骤详解

答案是通过构建前端控制器、路由器、控制器、模型和视图的分工协作实现PHP的MVC框架。首先，所有请求由public/index.php接收，加载自动加载器并启动应用；接着，根据路由规则将请求分发到对应控制器；控制器调用模型处理业务逻辑与数据，再将结果传递给视图渲染输出，最终返回响应。该结构通过解耦各…

程序猿
2026年5月10日
0000