JSON 数据转 HTML 表格 - 嵌套折叠与排序

快速开始指南

本教程将详细介绍如何使用 JSON 数据转 HTML 表格工具完成从数据输入到结果导出的完整流程。即使您没有任何编程经验，也可以轻松上手本工具。整个操作过程完全在浏览器中完成，无需安装任何软件或插件，也无需注册账号或登录系统，打开页面即可直接使用全部功能。建议按照以下步骤依次操作，以获得最佳的使用体验和学习效果。

打开浏览器访问 /tool/json-to-html-table-renderer 页面。页面加载完成后，您将看到工具的主界面，包括左侧的数据输入区域、中间的操作按钮区域和右侧的结果展示区域。建议使用 Chrome、Firefox、Edge 等现代浏览器以获得最佳体验，这些浏览器对 JavaScript 的执行效率较高，能够保证工具的流畅运行。页面加载后无需等待任何初始化操作，工具即可立即使用，所有功能模块均已预加载完毕。

在页面左侧的文本输入框中粘贴或手动输入您的 JSON 数据。您可以输入以下几种格式的 JSON：

• JSON 数组 - 包含多个对象的数组，每个对象将渲染为表格的一行，这是最常见的使用方式，适用于列表类数据的展示
• JSON 对象 - 单个对象，属性将作为表格的列，属性值将作为单元格内容，适用于单条记录的详情展示
• 嵌套结构 - 包含嵌套对象或数组的复杂 JSON，工具会自动处理层级关系并以折叠方式呈现，适用于层次化的复杂数据展示

如果您的 JSON 数据格式混乱，可以先点击格式化按钮进行美化处理，格式化后的数据更容易阅读和编辑，也有助于发现潜在的格式错误。

如果您暂时没有自己的 JSON 数据，或者想先体验工具功能，可以点击工具栏上的示例数据按钮。工具提供三个不同复杂度的内置示例，每个示例都经过精心设计，能够展示工具的不同能力：

• 示例1 - 简单的用户信息列表，包含基本的扁平结构，适合初步了解工具的基本功能和表格渲染效果
• 示例2 - 包含嵌套地址信息的员工数据，展示对象展开和折叠功能的实际效果，帮助理解嵌套数据的处理方式
• 示例3 - 复杂的订单数据，包含多层嵌套和数组结构，展示工具处理真实复杂数据的完整能力

数据准备就绪后，点击转换按钮即可在右侧结果区域看到生成的 HTML 表格。表格会自动识别 JSON 的结构并以适当的方式呈现：

• 顶层属性作为表格的主列，列标题由 JSON 的键名决定，清晰展示每个字段的含义
• 嵌套对象显示为可展开/折叠的子区域，支持多层嵌套，每一层都可以独立操作
• 嵌套数组显示为可展开/折叠的子表格，每个数组元素占一行，便于逐条查看
• 基本类型值（字符串、数值、布尔值、null）直接显示在对应单元格中，保持数据的原始形态

生成表格后，您可以使用以下交互功能来更好地查看和分析数据：

• 展开/折叠 - 点击嵌套数据旁的展开/折叠按钮来控制子层级的显示与隐藏，逐层探索数据结构
• 列排序 - 点击列标题对数据进行升序或降序排列，支持数值和字符串的智能排序，快速定位极端值
• 搜索过滤 - 在搜索框中输入关键词来查找匹配的数据，结果会自动高亮显示，匹配的折叠层级会自动展开
• 全部展开/折叠 - 使用工具栏按钮一键操作所有嵌套层级，快速切换数据的展示粒度

完成数据查看和分析后，可以根据需要选择不同的导出方式：

• 复制 HTML 代码 - 点击复制 HTML 按钮，将生成的表格代码复制到剪贴板，可以直接粘贴到任何 HTML 页面中使用，代码包含完整的样式和交互功能
• 复制 TSV 格式 - 点击复制 TSV 按钮，将表格数据以制表符分隔格式复制，方便粘贴到 Excel、Google Sheets 等电子表格软件中进行数据分析

导出的 HTML 代码是一个自包含的独立组件，包含了 Bootstrap 和 Font Awesome 的引用，可以直接嵌入到任何网页中使用，无需额外的配置和开发工作。导出操作会自动将代码复制到系统剪贴板，并显示操作成功的提示信息，让用户清楚地知道导出已完成。

建议在导出前先检查生成的表格是否符合预期，可以通过调整列排序、展开折叠等操作来确认数据展示效果满意后再进行导出，这样可以避免不必要的重复操作。