How to display a json file in a table [implementation code]

How to display a json file in a table [implementation code]_javascript skills

WBOY

Release： 2016-05-16 09:00:20

Original

3093 people have browsed it

<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>

Copy after login

i used to think about how to dynamically put json content into a table? sometimes i will be asked in the interview. of course, the question during the interview is how to use ajax. but i will write a simple demo here, and put the existing json into a table. i have made this demo several times. although it is placed in a table every time, it looks very weird. it may be a vertical arrangement, such as this

name

zhang san

age

gender

male

it may be the case

name

age

gender

zhang san

male

but this is what i want

name age gender

zhang san 26 male

after several experiments, i found that i need to make adjustments to the html skeleton structure. it is not possible to just put the table tag at the beginning. i have to add two tr tags. finally, use js to fill the two tr tags to achieve the desired result. desired effect

the above article on how to display a json file in a table [implementation code] is all the content shared by the editor. i hope it can give you a reference, and i hope you will support script home.