明霞山资源网 Design By www.htccd.com
<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文件显示在表格里【实现代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
json文件,表格
明霞山资源网 Design By www.htccd.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
明霞山资源网 Design By www.htccd.com
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。