jsp頁面根據json資料動態生成table
阿新 • • 發佈：2019-01-08
根據需求由於不同的表要在同一個jsp展示,點選某個表名便顯示某張表內容，對於java後臺傳給jsp頁面的json形式的資料是怎麼動態生成table的呢？
找了好久，終於找到某位前輩的答案，在此表示衷心的感謝！
做了部分調整，做下筆記，下面便是這個html的情況。
<html> <head> <title></title> <script type="text/javascript"> var jsonArray = [{"編號":"001","名稱":"小蘋果","描述":"現代神曲，大媽的最愛"},{"編號":"002","名稱":"mou寶","描述":"想怎麼玩就怎麼完"}]; var headArray = []; function parseHead(oneRow) { for ( var i in oneRow) { headArray[headArray.length] = i; } } function appendTable() { parseHead(jsonArray[0]); var div = document.getElementById("div1"); var table = document.createElement("table"); var thead = document.createElement("tr"); for ( var count = 0; count < headArray.length; count++) { var td = document.createElement("th"); td.innerHTML = headArray[count]; thead.appendChild(td); } table.appendChild(thead); for ( var tableRowNo = 0; tableRowNo < jsonArray.length; tableRowNo++) { var tr = document.createElement("tr"); for ( var headCount = 0; headCount < headArray.length; headCount++) { var cell = document.createElement("td"); cell.innerHTML = jsonArray[tableRowNo][headArray[headCount]]; tr.appendChild(cell); } table.appendChild(tr); } div.appendChild(table); } </script> <style> table { width: 600px; padding: 0 ; margin: 100 auto; border-collapse: collapse; } td,th { border: 1px solid #ddd; padding: 6px 6px 6px 12px; color: #4f6b72; text-align: center; } th { background: #d3d3d3; } </style> </head> <body onload="appendTable(jsonArray);"> <div id="div1"></div> </body> </html>
效果如下圖所示：
