當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript解析json格式的字符串，拼接后显示到表格中
生活随笔
收集整理的這篇文章主要介紹了
javascript解析json格式的字符串，拼接后显示到表格中
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
知識點
- 解析json格式的字符串
- 拼接的HTML設置到tbody當中
- 加載json格式的對象
結果演示
html代碼
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>拼接HTML</title>json格式的字符串，拼接的HTML設置到tbody當中</head><body><script type="text/javascript">var javaData="{\"total\":\"3\",\"data\":[{\"name\":\"xiaoTang\",\"age\":\"18\",\"salary\":\"18k\"},{\"name\":\"xiaoWei\",\"age\":\"19\",\"salary\":\"19k\"},{\"name\":\"xiaoKang\",\"age\":\"20\",\"salary\":\"20k\"}]}";//console.log(javaData);window.onload=function(){document.getElementById("displayButton").onclick=function(){//console.log(1111);//加載json格式的對象window.eval("var studentData="+javaData);//console.log(studentData.total)// 拼接HTMLvar studengsArray=studentData.data;console.log(studengsArray[0]);var iniHTML="";for(var i=0;i<studengsArray.length;i++){iniHTML+="<tr><td>"+studengsArray[i].name+"</td>";iniHTML+="<td>"+studengsArray[i].age+"</td>";iniHTML+="<td>"+studengsArray[i].salary+"</td></tr>"}//設置總記錄document.getElementById("mySpan").innerHTML=studentData.total;//設置子表數據document.getElementById("stutbody").innerHTML=iniHTML;}}</script><br><input type="button" id="displayButton" value="顯示信息" /><table border="1px" width="40%" id="myTable"><tr><th>姓名</th> <th>年紀</th> <th>薪水</th></tr><tbody id="stutbody"><!-- <tr><td>Data</td> <td>Data</td> <td>Data</td></tr><tr><td>Data</td> <td>Data</td> <td>Data</td></tr> --></tbody></table>總記錄有：<span id="mySpan">0</span>條！</body> </html>總結
以上是生活随笔為你收集整理的javascript解析json格式的字符串，拼接后显示到表格中的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Qt学习(十一)：QT设置静态数据库
- 下一篇： HTML+CSS+JavaScript复