登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > 动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格

动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格

2026-05-24 21:18:46 0浏览 收藏

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格 》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格

本文介绍如何使用 jQuery 遍历 JSON 数组对象，为每个对象生成 行，为其每个属性生成 单元格，并动态渲染为完整 HTML 表格，支持任意结构数据且无需预设字段名。

本文介绍如何使用 jQuery 遍历 JSON 数组对象，为每个对象生成 `

` 行，为其每个属性生成 `` 单元格，并动态渲染为完整 HTML 表格，支持任意结构数据且无需预设字段名。

在前端开发中，将 JSON 数据快速渲染为 HTML 表格是常见需求，尤其适用于管理后台、数据看板等场景。当数据结构灵活（如字段名不固定或后续可能扩展）时，硬编码 标签会降低可维护性。理想方案是自动推导表头并逐行逐列生成表格内容。

以下是一个轻量、健壮的 jQuery 实现，分为两步：

  1. 自动生成表头（）：提取首个对象的所有键作为列名；
  2. 动态构建表格主体（）：对每个对象遍历其属性值，生成对应 和 。


function buildTableFromJson(data, containerSelector) {
  if (!Array.isArray(data) || data.length === 0) {
    $(containerSelector).html("
无数据可显示
");
    return;
  }

  // 创建空 table 元素
  const $table = $("");

  // ✅ 步骤1：生成表头（thead）
  const headers = Object.keys(data[0]);
  const $thead = $("").appendTo($table);
  const $headerRow = $("").appendTo($thead);
  headers.forEach(key => $("").appendTo($table);
  data.forEach(obj => {
    const $row = $("").appendTo($tbody);
    headers.forEach(key => {
      const value = obj[key] !== undefined ? obj[key] : "";
      // 安全渲染：避免 XSS（尤其含 HTML 字符如 email 链接）
      $("

                                    

                                        

                        
                            电脑玩游戏经常闪退是怎么回事 运行库文件安装修复电脑玩游戏经常闪退是怎么回事 运行库文件安装修复                        
                        

                            
上一篇

                            
电脑玩游戏经常闪退是怎么回事 运行库文件安装修复

                        

                    

                                        

                        
                            HTML语义化：如何为搜索引擎爬虫提供清晰的文档结构
                        
                        

                            
下一篇

                            
HTML语义化：如何为搜索引擎爬虫提供清晰的文档结构

                        

                    

                                    

            

                

                    查看更多
                    
最新文章

                

            

            
        

        
        

            

                查看更多
                
课程推荐

            

            
    
                                
  • 
                    
                        前端进阶之JavaScript设计模式
                                            
                    
    
                        
    前端进阶之JavaScript设计模式
    
                        
    
                            设计模式是开发人员在软件开发过程中面临一般问题时的解决方案，代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景，打造一站式知识长龙服务，适合有JS基础的同学学习。                        
    
                        
    543次学习
    
                    
    
                
    • 
                                
  • 
                    
                        GO语言核心编程课程
                                            
                    
    
                        
    GO语言核心编程课程
    
                        
    
                            本课程采用真实案例，全面具体可落地，从理论到实践，一步一步将GO核心编程技术、编程思想、底层实现融会贯通，使学习者贴近时代脉搏，做IT互联网时代的弄潮儿。                        
    
                        
    516次学习
    
                    
    
                
    • 
                                
  • 
                    
                        简单聊聊mysql8与网络通信
                                            
                    
    
                        
    简单聊聊mysql8与网络通信
    
                        
    
                            如有问题加微信：Le-studyg；在课程中，我们将首先介绍MySQL8的新特性，包括性能优化、安全增强、新数据类型等，帮助学生快速熟悉MySQL8的最新功能。接着，我们将深入解析MySQL的网络通信机制，包括协议、连接管理、数据传输等，让                        
    
                        
    500次学习
    
                    
    
                
    • 
                                
  • 
                    
                        JavaScript正则表达式基础与实战
                                            
                    
    
                        
    JavaScript正则表达式基础与实战
    
                        
    
                            在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。                        
    
                        
    487次学习
    
                    
    
                
    • 
                                
  • 
                    
                        从零制作响应式网站—Grid布局
                                            
                    
    
                        
    从零制作响应式网站—Grid布局
    
                        
    
                            本系列教程将展示从零制作一个假想的网络科技公司官网，分为导航，轮播，关于我们，成功案例，服务流程，团队介绍，数据部分，公司动态，底部信息等内容区块。网站整体采用CSSGrid布局，支持响应式，有流畅过渡和展现动画。                        
    
                        
    485次学习
    
                    
    
                
    • 
                            

        

        

        

            查看更多
            
AI推荐

        

        
    
                        
  • 
                
                    ljg-skills - 
                
                
    
                    
    ljg-skills
    
                    
    
                        ljg-skills 是李继刚开源的 AI 技能与提示词集合，面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板，适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。                    
    
                    
    4158次使用
    
                
    
            
    • 
                        
  • 
                
                    MELO音乐 - AI 音乐生成平台，支持多模态创作能力
                
                
    
                    
    MELO音乐
    
                    
    
                        MELO音乐是一站式AI视频与音乐制作助手，对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐，MELO为你免费谱曲，轻松做同款！                    
    
                    
    3863次使用
    
                
    
            
    • 
                        
  • 
                
                    UniScribe - AI 免费在线音视频转文字平台
                
                
    
                    
    UniScribe
    
                    
    
                        UniScribe 是一款 AI 音视频转文字与内容整理工具，支持上传音频、视频文件或粘贴 YouTube 链接，自动生成转写文本、摘要、思维导图和关键问题，并支持多格式导出，适合会议记录、课程学习、访谈整理和内容创作复盘。                    
    
                    
    3850次使用
    
                
    
            
    • 
                        
  • 
                
                    剧云 - 免费 AI 智能中文剧本创作平台
                
                
    
                    
    剧云
    
                    
    
                        剧云是专业中文剧本创作平台，安全稳定运行十余年，集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能，数据安全防护，轻松高效创作剧本。                    
    
                    
    4023次使用
    
                
    
            
    • 
                        
  • 
                
                    万象有声 - AI 一站式有声内容创作平台
                
                
    
                    
    万象有声
    
                    
    
                        万象有声，一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具，可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验，让有声书制作更简单！                    
    
                    
    3998次使用
    
                
    
            
    • 
                    

    

        
        

            

                查看更多
                
相关文章

            

            
        

    

    

        

            

                关于我们
                免责声明
                意见反馈
                联系我们
                内容提交
                 手册
            

            
Golang学习网：公益在线Go学习平台，帮助Go学习者快速成长！

            

                技术交流群
            

            

                Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 苏ICP备2023003363号-1
            

        

        

            
    
                
                
  • 
                    
    
                        Golang学习网
                    
    
                    
    关注公众号
    
                    
    Golang学习网
    
                
    • 
                
    
            

        

        

    



    

      

        
      

      
      
      
      

        

        

          
微信登录更方便

        

        

          
    
            
  • 密码登录
    •  
            
  • 注册账号
    • 
          

          

            

              

                
                                

                  
                

                

                  
                

                

                  

                    
                  

                
                    
                
              

                

                  忘记密码
                

                

                  
                

              
            

            
          

        

        
登录即同意 用户协议 和 隐私政策

      

		
		

			

			
返回登录

			

			
    
				
  • 重置密码
    • 
			

			

				

				

          

          
        

					
          

            

              
            

            
                发送验证码
            
        


					 
			

					

					
					

				
				

			

			

		

    

  
").text(key).appendTo($headerRow));

  // ✅ 步骤2：生成表格主体（tbody）
  const $tbody = $("
").text(value).appendTo($row);
      // ⚠️ 若需保留原始 HTML（如已转义的链接），改用 .html(escapeHtml(value)) 并自行实现防 XSS
    });
  });

  // 渲染到目标容器
  $(containerSelector).empty().append($table);
}

// 示例数据（注意：email 中含 HTML 标签，需谨慎处理）
const users = [
  {
    "fullname": "Bob Wirth",
    "email": "Bob @mydomain.com",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-10-24 23:50:08.304896"
  },
  {
    "fullname": "Jane",
    "email": "jane@example.com",
    "status": "A",
    "lockcnt": "0",
    "lastlogin": "2023-11-03 11:31:57.18215"
  }
];

// 调用函数
$(function() {
  buildTableFromJson(users, "#results");
});
? 关键注意事项：  
  • 安全性优先：示例中统一使用 .text() 渲染单元格内容，可有效防止 XSS 攻击。若业务确需渲染 HTML（如富文本邮箱），必须先对 obj[key] 做严格白名单过滤或使用 DOMPurify 等库净化。  
  • 空数据容错：函数内置对空数组/undefined 的判断，避免运行时错误。  
  • 字段一致性：本方案假设所有对象具有相同 key 集合（以首个对象为准）。若存在稀疏字段，建议预先 normalize 数据（如用 Object.assign({}, baseSchema, obj) 补全缺失值）。  
  • 性能提示：对于上千条记录，建议启用虚拟滚动或分页，避免 DOM 过载。
? 进阶建议：  
  • 如需排序、搜索、分页等能力，推荐集成 DataTables 或 AG Grid 等专业表格库；  
  • 纯原生 JavaScript 版本（不依赖 jQuery）可通过 data.forEach(...) + document.createElement 实现，适合现代项目；  
  • 可进一步封装为 Vue/React 组件，结合响应式数据流提升体验。
此方法兼顾简洁性与扩展性，是 JSON → HTML 表格转化的实用基准方案。
以上就是《动态生成 HTML 表格：基于 JSON 数据自动构建行与单元格
》的详细内容，更多关于的资料请关注golang学习网公众号！