DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 如何讓一個json文件顯示在表格裡【實現代碼】
如何讓一個json文件顯示在表格裡【實現代碼】
編輯:關於JavaScript     
<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如何辦到。但是我這裡就寫個簡單的demo,現有的json放到表格裡。這個demo我做了好幾遍,雖然每次放到表格裡,但是樣子都很古怪,有可能是一個豎排例如這樣

姓名

張三

年齡

26

性別

又有可能是這樣

姓名

年齡

性別

張三

26

但是我想要的是這樣

姓名   年齡   性別

張三    26     男

在經過幾次實驗之後,發現需要在html骨架結構上做調整,一開始只放table標簽是不行的,得加兩個tr標簽,最後用js把兩個tr標簽填充,才能達到想要的效果

以上這篇如何讓一個json文件顯示在表格裡【實現代碼】就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved