jsp頁面根據json數據動態生成table

本文轉載自查看原文 2018-05-29 13:54 848 通用實踐/ 開發經驗/ java經驗集錦/ 前端/ 工作總結

根據需求由於不同的表要在同一個jsp展示,點擊某個表名便顯示某張表內容，對於java后台傳給jsp頁面的json形式的數據是怎么動態生成table的呢？

找了好久，終於找到某位前輩的答案，在此表示衷心的感謝！

做了部分調整，做下筆記，下面便是這個html的情況。

[html] view plain copy

print ?

<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>

<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>

效果如下圖所示：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jsp生成json數據根據JSON數據,自動生成Table 在JSP頁面中輸出JSON格式數據 Jquery解析Json字符串,並且動態生成數據表格Table js 動態生成json數據 JS-利用ajax獲取json數據，並傳入頁面生成動態tab jsp動態頁面 Jsp動態生成表格 jQuery 根據JSON數據動態生成表格 jQuery利用JSON數據動態生成表格