← 返回首页

📊 JSON转HTML表格

一键将JSON数组数据转换为格式整洁的HTML表格代码 · 支持嵌套JSON展开 · 自定义样式

📥 JSON输入

👁️ 表格预览

粘贴JSON并点击「转换」生成表格

HTML 代码
/* 点击「转换」生成HTML代码 */

关于JSON转HTML表格工具

本工具可以将JSON数组数据一键转换为格式整洁的HTML表格代码。自动识别JSON对象的所有字段作为表格列头,支持嵌套JSON展开、多种表格样式选项,帮助开发者和数据分析师快速将JSON数据可视化为HTML表格。

使用场景

常见问题

支持哪些JSON格式?

本工具支持JSON对象数组([{...}, {...}])和JSON对象({...})。如果是单个对象,工具会将其转换为单行表格。支持嵌套JSON对象和数组,开启「展开嵌套JSON」后,嵌套数据会以缩进方式展示。

数据会上传到服务器吗?

不会。所有数据处理完全在浏览器本地进行,无需上传任何数据到服务器。你可以放心使用,即使是敏感数据也不会外泄。

如何自定义表格样式?

在输入区域上方提供了斑马纹、边框、悬停高亮等样式选项。生成的HTML代码包含了完整的内联样式,直接复制即可使用。你也可以在生成的HTML基础上自行修改CSS样式。

支持多大的JSON数据?

理论上没有大小限制,但建议JSON数组条目不超过1000条,以确保浏览器的渲染性能和用户体验。超大JSON推荐分割后分批转换。

\n'; // Preview var previewStyle = ''; if(striped.checked) previewStyle += '.striped tr:nth-child(even) td{background:rgba(148,163,184,.04)}'; if(bordered.checked) previewStyle += '.bordered th,.bordered td{border:1px solid rgba(148,163,184,.15)}'; if(hover.checked) previewStyle += 'tr:hover td{background:rgba(6,182,212,.08)}'; tablePreview.innerHTML = '
' + '' + allKeys.map(function(k){return ''}).join('') + '' + '' + data.map(function(item){ return '' + allKeys.map(function(k){ var val = item && typeof item === 'object' ? item[k] : ''; var display = formatValue(val, expand); return ''; }).join('') + ''; }).join('') + '
' + k + '
' + display + '
'; if(previewStyle) { var styleEl = document.createElement('style'); styleEl.textContent = previewStyle; tablePreview.appendChild(styleEl); } htmlOutput.textContent = style + '\n' + html; updateFullHtml(fullHtml); showToast('✅ 转换成功,共 ' + data.length + ' 条记录'); } var cachedFullHtml = ''; function updateFullHtml(full){ cachedFullHtml = full; } convertBtn.addEventListener('click', convert); clearBtn.addEventListener('click', function(){ jsonInput.value = ''; tablePreview.innerHTML = '

粘贴JSON并点击「转换」生成表格

'; htmlOutput.textContent = '/* 点击「转换」生成HTML代码 */'; errorMsg.style.display = 'none'; }); sampleBtn.addEventListener('click', function(){ jsonInput.value = sampleData; convert(); }); copyHtml.addEventListener('click', function(){ var ta = document.createElement('textarea'); ta.value = htmlOutput.textContent; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); showToast('✅ HTML代码已复制到剪贴板'); }catch(e){ showToast('复制失败,请手动复制'); } document.body.removeChild(ta); }); copyFullHtml.addEventListener('click', function(){ if(!cachedFullHtml){ showToast('请先转换数据'); return; } var ta = document.createElement('textarea'); ta.value = cachedFullHtml; document.body.appendChild(ta); ta.select(); try{ document.execCommand('copy'); showToast('✅ 完整HTML页面已复制到剪贴板'); }catch(e){ showToast('复制失败,请手动复制'); } document.body.removeChild(ta); }); // Auto-convert on checkbox change [striped, bordered, hover, expandNested].forEach(function(cb){ cb.addEventListener('change', function(){ if(jsonInput.value.trim()){ convert(); } }); }); // Initial load jsonInput.value = sampleData; convert(); })();