登录
推荐 文章 Go 技术 课程 下载 专题 AI
首页 >  文章 >  前端

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

时间：2026-05-24 21:18:46 440浏览 收藏

学习知识要善于思考，思考，再思考！今天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 链接）
      $("

                    

      

        
相关阅读

        更多>
      

      
    

          

              
最新阅读

              更多>
          

          
      

      

        
课程推荐

        更多>
      

      
    
                
  • 
          
            前端进阶之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次学习
            
    
          
    
        
    • 
              

    

    
  
").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学习网公众号！