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



效果如下图所示：


												


											
jsp页面根据json数据动态生成table的更多相关文章
	

    
								
  1. 初探原生js根据json数据动态创建table
		
    初探原生js根据json数据动态创建table 小生以实习生的职位进入了一家非纯软件的公司做asp.net开发,大半个月下来发现公司里居然没有前端工程师,这令我很诧异,跟着公司做项目,发现前端后台没有 ...
    
		
    2. 
						
  2. js将json数据动态生成表格
		
    今天开发中遇到需要展示动态数据的问题, 具体要求是后端传来的json字符串,要在前端页面以table表格的形式展示, 其实没啥难的,就是拼接table标签,纯属体力活,于是自己写了个呆萌,保存起来,以 ...
    
		
    3. 
						
  3. 【转载】Jsp页面传Json数据到服务端，转对象或集合进行数据处理
		
    需求:1.将页面数据带到服务端并转成对象,2.将页面的集合数据带到服务端转List实现:用ajax请求传递数据,数据格式为json JS方法: testJsonMethod = function(){ ...
    
		
    4. 
						
  4. AJAX请求返回JSON数据动态生成html
		
    1:DeliveryPersonVO对象 package com.funcanteen.business.entity.delivery.vo; import java.util.List; impo ...
    
		
    5. 
						
  5. jQuery 根据JSON数据动态生成表格
		
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
    
		
    6. 
						
  6. jQuery利用JSON数据动态生成表格
		
    <style type="text/css"> table.gridtable { font-family: verdana,arial,sans-serif; fon ...
    
		
    7. 
						
  7. angular js根据json文件动态生成路由状态
		
    项目上有一个新需求,就是需要根据json文件动态生成路由状态,查阅了一下资料,现在总结一下发出来: 首先项目用到的是angular的UI-路由,所以必须引入angular.js和angular-ui- ...
    
		
    8. 
						
  8. 动态生成Table内文字换行。
		
    后台动态生成table,并把td内的文字进行换行. 前台: <body style="width:100%;height:540px;margin-left:0px;margin-to ...
    
		
    9. 
						
  9. 利用在线工具根据JSon数据自动生成对应的Java实体类
		
    如果你希望根据JSon数据自动生成对应的Java实体类,并且希望能进行变量的重命名,那么“JSON To Java”一定适合你.(下面的地址需要FQ) https://jsontojava.appsp ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 基于Ubuntu14.04下Suricata（一款高性能的网络IDS、IPS和网络安全监控引擎）的搭建（图文详解）（博主推荐）
			
    为什么,要写这篇论文? 是因为,目前科研的我,正值研三,致力于网络安全.大数据.机器学习研究领域! 论文方向的需要,同时不局限于真实物理环境机器实验室的攻防环境.也不局限于真实物理机器环境实验室的大数 ...
    
			
    2. 
						
  2. html----有关图像
			
    这一节内容可概括为:网页上插入图片,调整图片大小,使用缩略图链接至大图. 图片的三种格式:jpeg     png    gif 照片.复杂图像使用jpeg,单色图像.logo.几何图形使用png以及 ...
    
			
    3. 
						
  3. 详解Android Activity生命周期
			
    转载注明来自:  http://www.cnblogs.com/wujiancheng/ 一.正常情况下Activity的生命周期:  Activity的生命周期大概可以归为三部分 整个的生命周期:o ...
    
			
    4. 
						
  4. [Tunny]CSS LESS框架基础
			
    [黄映焜/Tunny,20140711] Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions)  ...
    
			
    5. 
						
  5. ZooKeeper系列（二）
			
    Zookeeper的环境配置 一.Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式. 1.单机模式:Zookeeper只运行在一台服务器上,适合测试环境 ...
    
			
    6. 
						
  6. Python3.0 调用HTMLTestRunner生成的报告中不能显示用例中print函数的输出
			
    官方原生的HTMLTestRunner.py支持python2.0版本,python3.0版本的使用需要做一些修改: Python3调用HTMLTestRunner执行用例生成测试报告中,不能正常显示 ...
    
			
    7. 
						
  7. [CodeForces]1059D Nature Reserve
			
    大意:给你一个平面上N(N<=100000)个点,问相切于x轴的圆,将所有的点都覆盖的最小半径是多少. 计算几何???Div2的D题就考计算几何???某人昨天上课才和我们说这种计算几何题看见就溜 ...
    
			
    8. 
						
  8. 共享win7ip，虚拟机nat模式连接，电脑重启之后，无法连接
			
    问题原因:VMware NAT Service没有设置为开机启动 解决办法: 1.按win+r,输入services.msc,点击确定: 2.服务窗口中找到VMware NAT Service,双击: ...
    
			
    9. 
						
  9. 边框带阴影  box-shadow
			
    .chosen-container-active .chosen-single { border: 1px solid #5897fb; -webkit-box-shadow: 0 0 5px rgb ...
    
			
    10. 
						
  10. CAD参数绘制固定批注（网页版）
			
    js中实现代码说明: 自定义实体绘制函数 function ExplodeFun(pCustomEntity, pWorldDraw, txt) { var sGuid = pCustomEntity ...
    
			
    11.