如何讓一個json檔案顯示在表格裡【實作程式碼】_javascript技巧
- WBOY原創
- 2016-05-16 09:00:203120瀏覽
<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檔案顯示在表格裡【實現程式碼】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn