>  기사  >  웹 프론트엔드  >  json 파일을 테이블에 표시하는 방법 [구현코드]_javascript 기술

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

WBOY
WBOY원래의
2016-05-16 09:00:203144검색
<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을 테이블에 넣을 것입니다. 이 데모를 매번 테이블에 배치했지만 이렇게 보면 매우 이상하게 보일 수 있습니다

이름

장산

나이

26

성별

남성

이럴 수도 있겠네요

이름

나이

성별

장산

26

남성

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

이름 나이 성별

장산 26남

몇번의 실험 끝에 HTML 스켈레톤 구조를 조정해야 한다는 것을 알았습니다. 처음에 테이블 태그만 넣는 것은 불가능합니다. 마지막으로 js를 사용하여 채워야 합니다. 원하는 결과를 얻으려면 두 개의 tr 태그를 사용하세요

위의 json 파일을 테이블에 표시하는 방법[구현 코드]에 대한 글은 모두 에디터가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.