Maison > Article > interface Web > Comment afficher un fichier json dans un tableau [code d'implémentation] compétences_javascript

Comment afficher un fichier json dans un tableau [code d'implémentation] compétences_javascript

WBOYoriginal: 2016-05-16 09:00:203118parcourir

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

Je pensais à la façon de mettre dynamiquement du contenu json dans un tableau ? Parfois, on me posera la question lors des entretiens. Bien sûr, la question lors de l'entretien est de savoir comment le faire en utilisant ajax. Mais je vais écrire une démo simple ici et mettre le json existant dans un tableau. J'ai fait cette démo plusieurs fois. Même si elle est placée dans un tableau à chaque fois, cela semble très bizarre. Il peut s'agir d'une disposition verticale, comme celle-ci

Nom

Zhang San

Âge

Genre

Homme

Ça pourrait être comme ça

Nom

Âge

Genre

Zhang San

Homme

Mais c'est ce que je veux

Nom Âge Sexe

Zhang San 26 ans, homme

Après plusieurs expériences, j'ai constaté que je devais apporter des ajustements à la structure du squelette HTML. Il n'est pas possible de simplement mettre la balise table au début, je dois ajouter deux balises tr. deux balises tr pour obtenir le résultat souhaité L'effet souhaité

L'article ci-dessus sur la façon d'afficher un fichier json dans un tableau [code d'implémentation] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez Script Home.

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le contrôleur AngularJS hérite d'un autre contrôleurArticle suivant：Le contrôleur AngularJS hérite d'un autre contrôleur

Articles Liés

Voir plus