如何讓一個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)放到表格里面呢?有時候面試會被問到,當然面試時問的是用ajax如何辦到。但是我這里就寫個簡單的demo,現(xiàn)有的json放到表格里。這個demo我做了好幾遍,雖然每次放到表格里,但是樣子都很古怪,有可能是一個豎排例如這樣
姓名
張三
年齡
26
性別
男
又有可能是這樣
姓名
年齡
性別
張三
26
男
但是我想要的是這樣
姓名 年齡 性別
張三 26 男
在經(jīng)過幾次實驗之后,發(fā)現(xiàn)需要在html骨架結(jié)構(gòu)上做調(diào)整,一開始只放table標簽是不行的,得加兩個tr標簽,最后用js把兩個tr標簽填充,才能達到想要的效果
以上這篇如何讓一個json文件顯示在表格里【實現(xiàn)代碼】就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
javascript運動效果實例總結(jié)(放大縮小、滑動淡入、滾動)
這篇文章主要介紹了javascript運動效果,結(jié)合實例形式總結(jié)分析JavaScript實現(xiàn)放大縮小、滑動淡入、滾動等效果的方法,需要的朋友可以參考下2016-01-01JS根據(jù)生日月份和日期計算星座的簡單實現(xiàn)方法
這篇文章主要介紹了JS根據(jù)生日月份和日期計算星座的簡單實現(xiàn)方法,涉及javascript日期時間與字符串操作相關技巧,需要的朋友可以參考下2016-11-11js實現(xiàn)的鼠標滾輪滾動切換頁面效果(類似360默認頁面滾動切換效果)
這篇文章主要介紹了js實現(xiàn)的鼠標滾輪滾動切換頁面效果,類似360默認頁面滾動切換效果.涉及JavaScript響應鼠標事件動態(tài)變換頁面元素的相關技巧,需要的朋友可以參考下2016-01-01微信小程序 功能函數(shù)小結(jié)(手機號驗證*、密碼驗證*、獲取驗證碼*)
這篇文章主要介紹了微信小程序功能函數(shù)手機號驗證、密碼驗證,獲取驗證碼*的相關代碼,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-12-12