zoukankan html css js c++ java

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

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

 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>

效果如下图所示：

查看全文

相关阅读:
作业要求 20181030-1 Alpha发布用户使用报告
 Scrum立会报告+燃尽图（Beta阶段第二周第二次）
Scrum立会报告+燃尽图（Beta阶段第二周第一次）
20181113-3 Beta阶段贡献分配规则
 20181113-1 版本控制报告
 Scrum立会报告+燃尽图（Beta阶段第七次）
Scrum立会报告+燃尽图（Beta阶段第六次）
Scrum立会报告+燃尽图（Beta阶段第五次）
Scrum立会报告+燃尽图（Beta阶段第四次）
Scrum立会报告+燃尽图（Beta阶段第三次）

原文地址：https://www.cnblogs.com/jpfss/p/9104686.html