json 파일을 테이블에 표시하는 방법 [구현코드]

json 파일을 테이블에 표시하는 방법 [구현코드]_javascript 기술

WBOY

풀어 주다： 2016-05-16 09:00:20

원래의

3116명이 탐색했습니다.

<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를 어떻게 사용하느냐는 질문을 받기도 합니다. 하지만 여기서는 간단한 데모를 작성하고 기존 json을 테이블에 넣을 것입니다. 이 데모를 매번 테이블에 배치했지만 이렇게 보면 매우 이상하게 보일 수 있습니다

이름

장산

나이

성별

남성

이럴 수도 있겠네요

이름

나이

성별

장산

남성

하지만 내가 원하는 건 바로 이것이다