登录注册

当前位置：首页 > 文章列表 > 文章 > 前端 > 动态生成 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推荐

        

        
    
                        
  • 
                
                    PubMedQA数据集详解：生物医学问答基准、功能与应用指南
                
                
    
                    
    PubMedQA
    
                    
    
                        深入了解PubMedQA生物医学问答数据集，涵盖其核心功能、使用方法及在临床决策、药物研发等场景的应用，助力提升NLP模型性能。                    
    
                    
    429次使用
    
                
    
            
    • 
                        
  • 
                
                    H2O EvalGPT：开源LLM大模型评估与排行榜工具
                
                
    
                    
    H2O EvalGPT
    
                    
    
                        H2O EvalGPT是H2O.ai推出的开源LLM评估平台，提供详细的大模型性能排行榜、行业特定基准测试及A/B测试功能，助您快速选择最适合项目的高性能大语言模型。                    
    
                    
    507次使用
    
                
    
            
    • 
                        
  • 
                
                    LMArena是什么？伯克利AI模型评估平台使用指南与功能解析
                
                
    
                    
    LMArena
    
                    
    
                        LMArena是加州大学伯克利分校推出的AI模型匿名评测平台。通过盲测投票机制，用户可对比不同大模型回答并生成实时排行榜，助力开发者优化模型及用户选择最佳AI工具。                    
    
                    
    520次使用
    
                
    
            
    • 
                        
  • 
                
                    斯坦福HELM：大语言模型Holistic Evaluation整体评估框架详解
                
                
    
                    
    HELM
    
                    
    
                        深入了解斯坦福推出的HELM（Holistic Evaluation of Language Models）大模型评测体系。本文解析其核心功能、安装配置步骤及应用场景，涵盖准确性、公平性、鲁棒性等多维度指标，助力开发者全面优化语言模型性能。                    
    
                    
    463次使用
    
                
    
            
    • 
                        
  • 
                
                    MMBench详解：多模态大模型基准测试、功能特点与使用指南
                
                
    
                    
    MMBench
    
                    
    
                        MMBench是由上海人工智能实验室等机构联合推出的多模态基准测试平台，提供细粒度能力评估、大规模数据集及VLMEvalKit工具。本文详细介绍其核心功能、安装使用方法及应用场景，助力开发者全面评估多模态模型性能。                    
    
                    
    291次使用
    
                
    
            
    • 
                    

    

        
        

            

                查看更多
                
相关文章

            

            
        

    

    

        

            

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

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

            

                技术交流群
            

            

                Copyright 2023 http://www.17golang.com/ All Rights Reserved ｜ 湘ICP备19018815号-4
            

        

        

            
    
                
                
  • 
                    
    
                        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学习网公众号！