<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에 많은 지원 부탁드립니다.