如何讓一個(gè)json文件顯示在表格里【實(shí)現(xiàn)代碼】
<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)文章
JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口示例
這篇文章主要介紹了JS實(shí)現(xiàn)DIV高度自適應(yīng)窗口的方法,結(jié)合完整實(shí)例形式分析了JS通過動(dòng)態(tài)操作頁面元素屬性實(shí)現(xiàn)高度自適應(yīng)的相關(guān)技巧,需要的朋友可以參考下2017-02-02
javascript運(yùn)動(dòng)效果實(shí)例總結(jié)(放大縮小、滑動(dòng)淡入、滾動(dòng))
這篇文章主要介紹了javascript運(yùn)動(dòng)效果,結(jié)合實(shí)例形式總結(jié)分析JavaScript實(shí)現(xiàn)放大縮小、滑動(dòng)淡入、滾動(dòng)等效果的方法,需要的朋友可以參考下2016-01-01
JS根據(jù)生日月份和日期計(jì)算星座的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了JS根據(jù)生日月份和日期計(jì)算星座的簡(jiǎn)單實(shí)現(xiàn)方法,涉及javascript日期時(shí)間與字符串操作相關(guān)技巧,需要的朋友可以參考下2016-11-11
js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果(類似360默認(rèn)頁面滾動(dòng)切換效果)
這篇文章主要介紹了js實(shí)現(xiàn)的鼠標(biāo)滾輪滾動(dòng)切換頁面效果,類似360默認(rèn)頁面滾動(dòng)切換效果.涉及JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)變換頁面元素的相關(guān)技巧,需要的朋友可以參考下2016-01-01
表格展示利器 Bootstrap Table實(shí)例代碼
在表格導(dǎo)出數(shù)據(jù)中，發(fā)現(xiàn)設(shè)置了分頁參數(shù)，導(dǎo)出的數(shù)據(jù)僅為表格加載的分頁參數(shù)數(shù)據(jù)，于是，針對(duì)這樣的情況，通過設(shè)置分頁參數(shù)的值，使表格可以加載更多的數(shù)據(jù)，可達(dá)到導(dǎo)出所有數(shù)據(jù)的功能需求。下面通過本文給大家分享表格展示利器 Bootstrap Table2017-09-09
這篇文章主要教大家如何簡(jiǎn)單實(shí)現(xiàn)js拖拽效果，很詳細(xì)的js拖拽效果實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了小程序自動(dòng)化測(cè)試，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了2種JavaScript主要繼承方式，一種是通過原型的方式，一種是通過借用call&apply的構(gòu)造函數(shù)方式，感興趣的小伙伴們可以參考一下2015-12-12
微信小程序 功能函數(shù)小結(jié)(手機(jī)號(hào)驗(yàn)證*、密碼驗(yàn)證*、獲取驗(yàn)證碼*)
這篇文章主要介紹了微信小程序功能函數(shù)手機(jī)號(hào)驗(yàn)證、密碼驗(yàn)證，獲取驗(yàn)證碼*的相關(guān)代碼，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-12-12
這篇文章主要介紹了關(guān)閉瀏覽器窗口時(shí)彈出提示框，并且可以通過函數(shù)控制其失效,需要的朋友可以參考下2014-04-04