如何讓一個json文件顯示在表格里【實現(xiàn)代碼】
更新時間：2016年05月09日 17:03:10 投稿：jingxian
如何讓一個json文件顯示在表格里？下面小編就為大家?guī)硪黄屢粋€json文件顯示在表格里的實現(xiàn)代碼。希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦
<body>
//首先得把架子搭起來
<table id = "tb" border="1">
<tr></tr>
<tr></tr>
</table>
//js部分
<script>
//簡單的json內(nèi)容
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的內(nèi)容動態(tài)放到表格里面呢？有時候面試會被問到，當(dāng)然面試時問的是用ajax如何辦到。但是我這里就寫個簡單的demo，現(xiàn)有的json放到表格里。這個demo我做了好幾遍，雖然每次放到表格里，但是樣子都很古怪，有可能是一個豎排例如這樣
姓名
張三
年齡
26
性別
男
又有可能是這樣
姓名
年齡
性別
張三
26
男
但是我想要的是這樣
姓名 年齡 性別
張三 26 男
在經(jīng)過幾次實驗之后，發(fā)現(xiàn)需要在html骨架結(jié)構(gòu)上做調(diào)整，一開始只放table標(biāo)簽是不行的，得加兩個tr標(biāo)簽，最后用js把兩個tr標(biāo)簽填充，才能達到想要的效果
以上這篇如何讓一個json文件顯示在表格里【實現(xiàn)代碼】就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了javascript面向?qū)ο笕筇卣髦庋b,簡單描述了封裝的基本概念、原理,并結(jié)合實例形式詳細(xì)分析了javascript面向?qū)ο蟪绦蛟O(shè)計中封裝的用法與相關(guān)操作注意事項,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了BootStrap3中模態(tài)對話框的使用的相關(guān)資料,需要的朋友可以參考下2017-01-01
js利用事件的阻止冒泡實現(xiàn)點擊空白模態(tài)框的隱藏
點擊彈出某個框框，但是，有時候不想操作，就想點擊某個空白處，隱藏該框框，關(guān)于這一點，下面有個具體的實現(xiàn)2014-01-01
Some tips of wmi scripting in jscript (1)
Some tips of wmi scripting in jscript (1)...2007-04-04
基于Two.js實現(xiàn)星球環(huán)繞動畫效果的示例
本篇文章主要介紹了基于Two.js實現(xiàn)=星球環(huán)繞動畫效果的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
使用js實現(xiàn)幾秒以后倒計時跳轉(zhuǎn)，這個在某些特殊情況下還是比較實用的，下面為大家介紹下具體的實現(xiàn)步驟，感興趣的朋友不要錯過2013-12-12
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)跳一跳小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
javascript中利用柯里化函數(shù)實現(xiàn)bind方法【推薦】
下面小編就為大家?guī)硪黄猨avascript中利用柯里化函數(shù)實現(xiàn)bind方法【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考，一起跟隨小編過來看看吧2016-04-04
JavaScript 監(jiān)聽textarea中按鍵事件
不同的瀏覽器中的事件監(jiān)聽機制是不同的，以onKeyPress事件為例。2009-10-10
今天小編就為大家分享一篇layui彈出框Tab選項卡的示例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09