jsonファイルをテーブルに表示する方法【実装コード】_javascriptスキル

WBOY
リリース: 2016-05-16 09:00:20
オリジナル
3094 人が閲覧しました
<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ファイルをテーブル表示する方法【実装コード】の記事はエディタ共通の内容となっておりますので、ご参考になれば幸いです、またスクリプトホームをご支援いただければ幸いです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!