So zeigen Sie eine JSON-Datei in einer Tabelle an [Implementierungscode]

So zeigen Sie eine JSON-Datei in einer Tabelle an [Implementierungscode]_Javascript-Kenntnisse

WBOY

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

Original

3116 Leute haben es durchsucht

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

Nach dem Login kopieren

Früher habe ich darüber nachgedacht, wie man JSON-Inhalte dynamisch in eine Tabelle einfügt? Manchmal wird mir in Interviews die Frage gestellt, wie man das mit Ajax macht. Aber ich werde hier eine einfache Demo schreiben und den vorhandenen JSON in eine Tabelle einfügen. Ich habe diese Demo mehrmals erstellt, obwohl sie jedes Mal in einem Tisch platziert ist. Es kann eine vertikale Anordnung sein, wie diese

Name

Zhang San

Alter

Geschlecht

Männlich

Es könnte so sein

Name

Alter

Geschlecht

Zhang San

Männlich

Aber das ist es, was ich will

Name Alter Geschlecht

Zhang San 26 männlich

Nach mehreren Experimenten habe ich festgestellt, dass ich Anpassungen an der HTML-Skelettstruktur vornehmen muss. Es ist nicht möglich, das Tabellen-Tag einfach an den Anfang zu setzen. Zum Schluss muss ich js verwenden zwei tr-Tags, um den gewünschten Effekt zu erzielen

Der obige Artikel zum Anzeigen einer JSON-Datei in einer Tabelle [Implementierungscode] ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und hoffe, dass Sie Script Home unterstützen.