<body>//首先得把架子搭起來<table id = "tb" border="1"> <tr></tr> <tr></tr></table>//js部分<script>//簡單的json內容var json = {"姓名":"張三","年齡":"26","性別":"男"};//獲取trvar 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文件顯示在表格里【實現代碼】就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
