ホームページ > 記事 > ウェブフロントエンド > jsonファイルをテーブルに表示する方法【実装コード】_javascriptスキル
jsonファイルをテーブルに表示する方法【実装コード】_javascriptスキル
- WBOYオリジナル
- 2016-05-16 09:00:203121ブラウズ
<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
男性
しかし、これが私が望むものです
名前 年齢 性別
zhang san 26 男性
いくつかの実験の結果、html スケルトン構造を調整する必要があることがわかりました。先頭に table タグを置くだけではだめです。tr タグを 2 つ追加する必要があります。最後に、js を使用して、望ましい結果を達成するには、2 つの tr タグを使用します。望ましい効果
上記のjsonファイルをテーブル表示する方法【実装コード】の記事はエディタ共通の内容となっておりますので、ご参考になれば幸いです、またスクリプトホームをご支援いただければ幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。