本教程详细介绍了如何利用javascript动态生成html表格，并将javascript数组中的数据逐一填充到表格的每个单元格中。通过dom操作，我们将学习如何创建表格行、单元格，并将其添加到预设的html表格结构中，实现数据的灵活展示。
在前端开发中，经常需要根据后端返回的数据或前端存储的数据动态生成HTML元素，其中表格是最常见的展示形式之一。本教程将指导您如何使用纯JavaScript（不依赖任何库）动态创建一个HTML表格，并利用一个数组的数据来填充表格的每一行和每一个单元格。
1. HTML 结构准备
首先，我们需要在HTML文档中定义一个空的
元素作为容器，并为其指定一个唯一的id，以便JavaScript能够准确地获取到它。通常，我们会预先设置好表格的表头（
和动态表格示例 /* 样式将在后续部分提供 */ table, th, td { border: 1px solid #777; text-align: center; border-collapse: collapse; /* 合并边框 */ padding: 8px; } table { width: 80%; margin: 20px auto; } th { background-color: #f2f2f2; }水果列表
| 索引 | 水果名称 |
|---|
注意，这里我们预留了
，JavaScript将把动态生成的行添加到这个中。
2. JavaScript 核心逻辑
接下来，我们将编写JavaScript代码来执行以下步骤：
立即学习“Java免费学习笔记（深入）”；
定义一个包含数据的数组。获取HTML文档中预设的表格元素。遍历数组，为数组中的每个元素创建一行。在每一行中创建单元格，并填充数组元素的数据。将创建的行和单元格添加到表格中。
// 定义一个水果数组var fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango'];/** * 动态生成水果表格的函数 */function showFruits() { // 1. 获取HTML中ID为"fruits-table"的表格元素 // 注意：这里获取的是整个table元素，如果只想往tbody里添加，可以获取tbody const table = document.getElementById("fruits-table"); // 为了确保每次点击按钮时表格内容是新的，可以先清空旧内容 // 但由于我们的HTML结构中已经有，我们只清空 const tbody = table.querySelector('tbody'); if (tbody) { tbody.innerHTML = ''; // 清空现有的所有行 } else { // 如果没有tbody，则创建一个 const newTbody = document.createElement('tbody'); table.appendChild(newTbody); tbody = newTbody; } // 2. 遍历水果数组中的每一个元素 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); // append方法可以同时添加多个子元素 // 7. 将创建好的行 ( ) 添加到表格的 tbody 中 tbody.append(tr); });}// 首次加载页面时调用函数，生成表格// 如果是按钮点击触发，则需要将此函数绑定到按钮的点击事件上showFruits();
3. CSS 样式（可选）
为了让表格看起来更美观和易读，我们可以添加一些基本的CSS样式。这些样式可以定义表格的边框、文本对齐方式、内边距等。
table,th,td { border: 1px solid #777; /* 设置边框 */ text-align: center; /* 文本居中对齐 */ border-collapse: collapse; /* 合并相邻单元格的边框 */ padding: 8px; /* 单元格内边距 */}table { width: 80%; /* 表格宽度 */ margin: 20px auto; /* 居中显示 */}th { background-color: #f2f2f2; /* 表头背景色 */}
将这些CSS代码放置在HTML文件的
标签内的标签中，或者链接到一个外部CSS文件。
4. 完整示例
结合上述HTML结构、JavaScript逻辑和CSS样式，一个完整的动态生成表格的页面如下：
动态表格示例 table, th, td { border: 1px solid #777; text-align: center; border-collapse: collapse; padding: 8px; } table { width: 80%; margin: 20px auto; } th { background-color: #f2f2f2; } 水果列表
索引 水果名称
var fruits = ['apple', 'orange', 'grape', 'banana', 'guava', 'watermelon', 'mango']; function showFruits() { const table = document.getElementById("fruits-table"); const tbody = table.querySelector('tbody'); // 每次生成前清空tbody内容，避免重复添加 if (tbody) { tbody.innerHTML = ''; } else { const newTbody = document.createElement('tbody'); table.appendChild(newTbody); tbody = newTbody; } fruits.forEach((fruit, index) => { const tr = document.createElement("tr"); const indexTd = document.createElement("td"); indexTd.innerText = index; const fruitTd = document.createElement("td"); fruitTd.innerText = fruit; tr.append(indexTd, fruitTd); tbody.append(tr); }); } // 页面加载完成后自动生成表格 document.addEventListener('DOMContentLoaded', showFruits);
在这个完整示例中，我们添加了一个按钮，并通过onclick事件将其与showFruits()函数绑定，这样用户就可以手动触发表格的生成或更新。同时，使用DOMContentLoaded事件确保在HTML内容加载完毕后自动生成表格。
5. 注意事项与最佳实践
DOM操作性能： 对于非常大的数据集（例如数千行），频繁的DOM操作可能会影响性能。在这种情况下，可以考虑使用文档片段（DocumentFragment）来批量添加元素，减少页面重绘。
// 使用 DocumentFragment 优化性能function showFruitsOptimized() { const table = document.getElementById("fruits-table"); const tbody = table.querySelector('tbody'); if (tbody) tbody.innerHTML = ''; else table.appendChild(document.createElement('tbody')); const fragment = document.createDocumentFragment(); // 创建文档片段 fruits.forEach((fruit, index) => { const tr = document.createElement("tr"); const indexTd = document.createElement("td"); indexTd.innerText = index; const fruitTd = document.createElement("td"); fruitTd.innerText = fruit; tr.append(indexTd, fruitTd); fragment.appendChild(tr); // 将行添加到片段中 }); tbody.appendChild(fragment); // 一次性将片段内容添加到DOM}
数据源： 数组是本例的数据源，但在实际应用中，数据可能来自API请求、用户输入或其他JavaScript对象。您只需确保将数据格式化为可迭代的结构即可。
错误处理： 在实际项目中，应考虑当fruits-table元素不存在时如何处理，或者当数据数组为空时如何显示友好的提示信息。
可访问性： 对于动态生成的表格，确保其具有良好的可访问性（例如，为
提供scope属性，为复杂表格提供
）。
事件绑定： 如果showFruits函数由按钮触发，推荐使用addEventListener而不是内联onclick，以实现更好的事件管理和分离。
总结
通过本教程，您已经学会了如何使用JavaScript的DOM操作API来动态创建HTML表格，并将数组数据有效地填充到表格中。这种方法灵活且强大，是前端开发中处理数据展示的常用技术。掌握了这些基本技能，您可以进一步扩展，例如实现表格排序、过滤、分页等更高级的功能。
以上就是使用JavaScript动态创建HTML表格并填充数组数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1601997.html
赞 (0)
打赏
微信扫一扫
支付宝扫一扫
关于作者
相关推荐
-
如何在Java中实现个人财务管理工具
首先设计Transaction、FinanceManager和Budget核心类，实现交易记录、统计分析与预算控制功能，通过ArrayList管理数据，使用LocalDate处理日期，结合ObjectOutputStream持久化存储，初期采用Scanner构建控制台菜单实现增删查改与报表展示，后期…
-
VSCode的代码折叠功能好用吗？
VSCode代码折叠功能支持多种方式：点击箭头、快捷键、命令面板及按区域类型折叠；可自定义基于缩进的折叠、默认层级和提示装饰器；集成语言服务后能智能识别JSX、Vue组件等结构，提升大型文件编辑效率。 VSCode 的代码折叠功能非常实用，尤其在处理大型文件或复杂结构时能显著提升阅读和编辑效率。 支…
-
X旗下Grok上线即时语音搜索，挑战Google引领搜索新方向
近日，x平台旗下的ai助手grok正式推出了“即时语音搜索”功能。用户现在可以通过语音直接提问，触发实时网页检索，并迅速获得整合后的精准答案。此举意在优化信息获取流程，推动人机交互向更自然、高效的方向演进。 该语音搜索模式实现了“即说即搜即答”的流畅体验。例如，当用户提出“星舰发射的具体时间是什么？…
-
如何备份VSCode的全部设置和扩展？
备份VSCode全部设置和扩展需保存配置文件与扩展目录；2. 配置文件位于各系统指定路径的User文件夹内，包含settings.json和keybindings.json；3. 通过code –list-extensions导出扩展列表并用xargs批量重装可恢复扩展；4. 推荐直接复…
-
Laravel 8 登录后重定向到仪表盘的全面指南
本文深入探讨了 Laravel 8 中用户登录后重定向到仪表盘的多种策略。我们将详细解析默认的重定向机制，包括 LoginController 和 RedirectIfAuthenticated 中间件，并重点介绍如何通过自定义登录逻辑实现精确的重定向控制，同时提供示例代码和常见问题排查建议，确保用…
-
iPhone 17如何设置隐私共享限制
答案：通过设置隐私权限、关闭iCloud同步、退出家人共享及限制锁屏访问，可有效保护iPhone数据隐私。具体包括管理相机、麦克风、定位等权限，关闭不必要的iCloud数据同步，退出家庭共享群组，停用跨App内容共享，并在锁屏时禁用控制中心与通知预览，防止信息泄露。 虽然目前还没有iPhone 17…
-
Guava Multimap：高效获取并打印指定键的所有关联值
guava multimap是处理一键多值映射关系的强大工具。要获取特定键的所有关联值，应直接使用其提供的`multimap#get(k)`方法。该方法会返回一个包含所有匹配值的`collection`，即使键不存在，也会返回一个空集合而非`null`，从而简化了值检索和空值处理逻辑，是比手动迭代键…
-
如何在抖音有赞中查询订单号？——详解操作步骤
文章正文： 一、抖音有赞简介 抖音有赞是由抖音与有赞科技联合推出的电商服务工具，专为商家提供一站式的销售管理解决方案。通过这一平台，商家能够高效处理商品上架、订单管理等环节，消费者也能便捷地查看自己的购买记录和订单状态。 二、订单号查询方法 启动抖音应用，切换至底部导航中的“我”，然后选择“已购”入…
-
怎样配置VSCode与Jest、Cypress等测试框架进行集成测试？
首先安装Jest和Cypress插件及依赖，配置jest.config.js和.vscode/settings.json实现Jest自动运行，再通过launch.json添加Cypress调试配置，最后在package.json中定义统一脚本命令，使两者在VSCode中高效协同工作。 要在 VSCo…
-
实测！Sora 2长视频优势大，Vidu Q2细节处理更胜一筹
近日，AI视频工具领域的竞争愈发激烈。OpenAI推出的Sora 2刚刚登顶美区App Store榜单，国产新秀Vidu Q2便携重磅升级版本强势入局，引发广泛关注。不少从事自媒体创作与影视剪辑的朋友都在思考：这两款AI视频生成器，究竟谁更胜一筹？出于好奇，我亲自上手实测了一番，发现两者之间的差异更…
-
Java Stream 高效分组计数并获取Top N元素
本文深入探讨了如何利用java stream api对数据进行高效的分组计数，并从中提取出现频率最高的top n元素。文章首先介绍了一种简洁的基于全排序的实现方式，该方法适用于数据集较小或top n值接近总数的情况。随后，针对大数据量和小型top n场景下的性能瓶颈，文章详细阐述了如何通过自定义`c…
-
mac怎么阻止特定app访问网络_Mac阻止应用访问网络方法
可通过系统防火墙、hosts文件、第三方工具或pf防火墙阻止应用联网。首先，macOS内置防火墙可阻断入站连接，需在“系统设置-网络-防火墙”中添加应用并启用阻止；其次，编辑/etc/hosts文件，将目标域名指向127.0.0.1可屏蔽其网络访问，需刷新DNS缓存生效；再者，使用Little Sn…
-
VSCode的括号匹配功能如何自定义？
可通过 settings.json 自定义括号高亮的边框和背景色；2. 用 editor.matchBrackets 控制是否启用高亮；3. 启用 bracketPairColorization 可为嵌套括号着色；4. 使用 Ctrl/Cmd + Shift + 快速跳转配对括号。 VSCode 的…
-
JSF应用中Markdown文档动态链接处理指南
本教程旨在解决jsf web应用程序中集成markdown文档时，如何动态处理内部链接以实现页面局部更新的问题。通过结合服务器端markdown渲染和客户端javascript事件监听，我们可以拦截markdown生成的html链接点击事件，利用ajax异步加载并渲染目标markdown文件，从而在…
-
AI推文助手如何生成节日祝福 AI推文助手的情感连接内容创作
答案：通过AI推文助手的节日模板、情感关键词、用户数据定制和多语言混合策略，可高效生成个性化祝福，增强受众情感连接。 ☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 免费无限量使用 DeepSeek R1 模型☜☜☜ 如果您希望借助AI推文助手在节日期间传递温暖的祝福，同时增强与受众的情感连接…
-
如何通过命令行参数启动VSCode？
掌握VSCode命令行用法可提升开发效率，需先安装code命令到PATH，之后可用code .打开目录、code 文件名打开文件、code –diff比较文件、–disable-extensions排查问题，并支持别名与Shell结合使用。 通过命令行启动 VSCode 是一…
-
mysql如何理解数据压缩
MySQL数据压缩通过减少存储空间提升I/O效率，主要在InnoDB引擎中实现页级压缩，使用zlib算法对BLOB、TEXT等大字段表压缩效果显著，需设置ROW_FORMAT=COMPRESSED和KEY_BLOCK_SIZE；压缩可降低磁盘使用并加速全表扫描，但增加CPU开销，频繁更新可能导致页分…
-
什么是抖音？– 2024 年您需要了解的一切
抖音究竟是什么？ 抖音是一款专注于短视频分享的社交平台，最初以对口型功能起家，在 Musical.ly 时期广为人知。如今，它已发展成为全球最具影响力的社交媒体之一，用户不仅能创作娱乐内容，还能参与教育、时尚、科技等多元领域的表达与传播。尽管起源于移动端，但通过网页端也能轻松浏览海量视频。平台提供了…
-
iPhone XR如何关闭无用通知提醒
关闭iPhone XR无用通知需进入设置→通知，选择App关闭允许通知以彻底禁用，或调整显示预览为从不来隐藏锁屏与横幅内容。 想让iPhone XR清净一点，关掉那些没用的通知其实挺简单的。重点是找到正确的开关，既能彻底关闭某个App的打扰，也能调整显示方式减少干扰。 关闭特定App的通知权限 这是…
-
在Java中如何实现线程优先级控制
Java中线程优先级通过Thread类实现，取值范围1-10，分别对应MIN_PRIORITY、NORM_PRIORITY和MAX_PRIORITY；新线程继承父线程优先级，可通过setPriority()设置；尽管高优先级线程更可能被调度，但执行顺序不保证，因受操作系统影响；应避免依赖优先级控制关…
