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

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

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

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

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. </script>
35. <style>
36. table {
37. width: 600px;
38. padding: 0 ;
39. margin: 100 auto;
40. border-collapse: collapse;
41. }
42. td,th {
43. border: 1px solid #ddd;
44. padding: 6px 6px 6px 12px;
45. color: #4f6b72;
46. text-align: center;
47. }
48. th {
49. background: #d3d3d3;
50. }
51. </style>
52. </head>
53. <body onload="appendTable(jsonArray);">
54. <div id="div1"></div>
55. </body>
56. </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;
	}
&lt;/style&gt;

</head>

<body onload="appendTable(jsonArray);">

<div id="div1"></div>

</body>

</html>

效果如下图所示：