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

http://blog.youkuaiyun.com/qiuurl/article/details/39031355

根据需求由于不同的表要在同一个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>  

效果如下图所示：