<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에 많은 지원 부탁드립니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
