当前位置：首页 > 资讯 > 技术文档

如何让一个json文件显示在表格里【实现代码】

时间：2022-06-16 11:39 编辑：来源：阅读：
扫一扫，手机访问

摘要：如何让一个json文件显示在表格里【实现代码】

<body>
//首先得把架子搭起来
<table id = "tb" border="1">
 <tr></tr>
 <tr></tr>
</table>
//js部分
<script>
//简单的json内容
var json = {"姓名":"张三","年龄":"26","性别":"男"};
//获取tr
var tr = document.getElementsByTagName('tr');
//tr1和tr2下面会用到，但是要先声明，给一个空值
var tr1 = '';
var tr2 = '';
//用for in来进行遍历，k是键，json[k]是值
for(var k in json){
 tr1+='<th>'+k+'</th>';
 tr2+='<td>'+json[k]+'</td>';
}
//tr1里放的是键，也就是姓名，年龄，性别，然后把这些信息放到第一个tr里
tr[0].innerHTML = tr1;
//tr2里放的是值，也就是张三，26，男，把这些信息放到第二个tr里
tr[1].innerHTML = tr2;
</script>

[b]以前想着如何才能把json的内容动态放到表格里面呢？[/b]有时候面试会被问到，当然面试时问的是用ajax如何办到。但是我这里就写个简单的demo，现有的json放到表格里。这个demo我做了好几遍，虽然每次放到表格里，但是样子都很古怪，有可能是一个竖排例如这样姓名张三年龄 26 性别男又有可能是这样姓名年龄性别张三 26 男但是我想要的是这样姓名年龄性别张三 26 男在经过几次实验之后，发现需要在html骨架结构上做调整，一开始只放table标签是不行的，得加两个tr标签，最后用js把两个tr标签填充，才能达到想要的效果以上这篇如何让一个json文件显示在表格里【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：获取DOM对象的几种扩展及简写
下一篇：js Canvas绘制圆形时钟教程

资讯排行榜
更多>>