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