DDR爱好者之家

如何让一个json文件显示在表格里【实现代码】
站长资源 2024/11/29 佚名
16 1538
DDR爱好者之家 Design By 杰米
<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>

以前想着如何才能把json的内容动态放到表格里面呢？有时候面试会被问到，当然面试时问的是用ajax如何办到。但是我这里就写个简单的demo，现有的json放到表格里。这个demo我做了好几遍，虽然每次放到表格里，但是样子都很古怪，有可能是一个竖排例如这样

姓名

张三

年龄

26

性别

男

又有可能是这样

姓名

年龄

性别

张三

26

男

但是我想要的是这样

姓名   年龄   性别

张三    26     男

在经过几次实验之后，发现需要在html骨架结构上做调整，一开始只放table标签是不行的，得加两个tr标签，最后用js把两个tr标签填充，才能达到想要的效果

以上这篇如何让一个json文件显示在表格里【实现代码】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米