今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示,
其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以便下次使用
最终效果:
<!DOCTYPE HTML> <html> <head> <title>利用json数据动态创建表格</title> <meta charset="utf-8" /> <style> table{width:600px; border-collapse:collapse; text-align:center; } td,th{border:1px solid #ccc} </style> </head> <body> <div id="data"></div> <script> var json=[ {"name":"王大", "salary":11000, "age":25}, {"name":"李二", "salary":13000, "age":22}, {"name":"张三", "salary":12000, "age":25} ]; //创建table var table= document.createElement("table"); //创建thead，并追加到table中 var thead= document.createElement("thead"); table.appendChild(thead); //创建tr,并追加到thead var tr= document.createElement("tr"); thead.appendChild(tr); //json数组中第1个人的每个属性 for(var key in json[0]){ //创建th var th= document.createElement("th"); //设置th的内容为key th.innerHTML=key; //将th追加到tr中 tr.appendChild(th); } //创建tbody元素 var tbody= document.createElement("tbody"); //将tbody追加到table中 table.appendChild(tbody); //遍历json中所有员工 for(var i=0;i<json.length;i++){ //创建tr var tr= document.createElement("tr"); //遍历当前员工的每个属性 for(var key in json[i]){ //创建td var td= document.createElement("td"); //设置td的内容为当前员工的当前属性值 td.innerHTML=json[i][key]; //将td追加到tr tr.appendChild(td); }//(遍历结束) //将tr追加到tbody中 tbody.appendChild(tr); } //将table添加到id为data的div下 document.getElementById("data") .appendChild(table); </script> </body> </html>