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

最新推荐文章于 2022-08-30 12:03:45 发布

原创最新推荐文章于 2022-08-30 12:03:45 发布 · 1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#jsp #json #数据 #java

java 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在JSP页面上根据接收到的JSON数据动态生成表格。针对不同表展示的需求，当点击特定表名时，通过Java后台传递的JSON数据在前端动态构建表格内容。文中记录了实现这一功能的过程和调整，展示了最终实现的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果如下图所示：