jsp页面根据json数据动态生成table

根据需求由于不同的表要在同一个jsp展示,点击某个表名便显示某张表内容，对于java后台传给jsp页面的json形式的数据是怎么动态生成table的呢？

找了好久，终于找到某位前辈的答案，在此表示衷心的感谢！

做了部分调整，做下笔记，下面便是这个html的情况。

[html] view plain copy
 print?
  1. <html>  
  2. <head>  
  3. <title></title>  
  4. <script type="text/javascript">       
  5.           var jsonArray = [{"编号":"001","名称":"小苹果","描述":"现代神曲，大妈的最爱"},{"编号":"002","名称":"mou宝","描述":"想怎么玩就怎么完"}];  
  6.           var headArray = [];  
  7.           function parseHead(oneRow) {  
  8.                         for ( var i in oneRow) {  
  9.                                 headArray[headArray.length] = i;  
  10.                          }  
  11.             }  
  12.             function appendTable() {  
  13.                           parseHead(jsonArray[0]);  
  14.                           var div = document.getElementById("div1");   
  15.                           var table = document.createElement("table");  
  16.                           var thead = document.createElement("tr");  
  17.                           for ( var count = 0; count < headArray.length; count++) {  
  18.                                     var td = document.createElement("th");  
  19.                                     td.innerHTML = headArray[count];  
  20.                                     thead.appendChild(td);  
  21.                            }  
  22.                            table.appendChild(thead);  
  23.                           for ( var tableRowNo = 0; tableRowNo < jsonArray.length; tableRowNo++) {  
  24.                                     var tr = document.createElement("tr");  
  25.                                     for ( var headCount = 0; headCount < headArray.length; headCount++) {  
  26.                                             var cell = document.createElement("td");  
  27.                                             cell.innerHTML = jsonArray[tableRowNo][headArray[headCount]];  
  28.                                             tr.appendChild(cell);  
  29.                                     }  
  30.                                     table.appendChild(tr);  
  31.                          }  
  32.                           div.appendChild(table);  
  33.         }                         
  34.             
  35. </script>  
  36.     <style>  
  37.         table {  
  38.             width: 600px;  
  39.             padding: 0 ;  
  40.             margin: 100 auto;  
  41.             border-collapse: collapse;  
  42.         }  
  43.         td,th {  
  44.             border: 1px solid #ddd;  
  45.             padding: 6px 6px 6px 12px;  
  46.             color: #4f6b72;  
  47.             text-align: center;  
  48.         }  
  49.         th {  
  50.             background: #d3d3d3;  
  51.               
  52.         }  
  53.     </style>  
  54. </head>  
  55. <body onload="appendTable(jsonArray);">  
  56.     <div id="div1"></div>  
  57. </body>  
  58. </html>  



效果如下图所示：









            






            

            
posted @ 
2018-05-29 13:54 
星朝 
阅读(2024) 
评论(0) 
编辑 
收藏 
举报