根据需求由于不同的表要在同一个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. [转]Business Model Canvas（商业模式画布）：创业公司做头脑风暴和可行性测试的一大利器
			
    本文转自:http://www.36kr.com/p/214438.html 本文来自First Round Review,他们准备的文章既讲故事,还同时向创业者提供可操作的建议,以助力打造优秀的公司 ...
    
			
    2. 
						
  2. iOS Programming View Controllers  视图控制器
			
    iOS Programming View Controllers  视图控制器  1.1  A view controller is an instance of a subclass of UIVi ...
    
			
    3. 
						
  3. java JDK在windows及mac下安装配置
			
    windows下安装: JDK下载 地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151. ...
    
			
    4. 
						
  4. Redis缓存Object，List对象
			
    一.到目前为止(jedis-2.2.0.jar),在Jedis中其实并没有提供这样的API对对象,或者是List对象的直接缓存,即并没有如下类似的API jedis.set(String key, O ...
    
			
    5. 
						
  5. java格式化sql
			
    在日志分析中,经常会对记录的sql进行分析,所以将一整行sql格式化,进行多行缩就显得很有必要,许多数据库客户端都提供sql的格式化功能,但复杂的多层嵌套sql往往格式化的l还不够友好,所以就自己造了 ...
    
			
    6. 
						
  6. 【译】x86程序员手册36-9.9异常汇总
			
    9.9 Exception Summary 异常汇总 Table 9-6 summarizes the exceptions recognized by the 386. Table 9-6. Exc ...
    
			
    7. 
						
  7. 这是一条立了Flag的不归路
			
    时间2017年7月11日 14:48:40 首次激活博客园的博客来进行学习记录,立下了不算远大的小目标,下一步就是要一步一步的往前走. Java是目前最普遍的使用语言之一,作为一名测试,本应该去学习更 ...
    
			
    8. 
						
  8. 迅为电子4.3寸CAN总线工业平板电脑简介
			
    型号:iTOP-HMI043-C 4.3寸CAN总线工业平板电脑支持CAN通讯显示器,显示:显示尺寸:4.3英寸:分辨率:480×272 TFT液晶 65536色 :接口:支持CAN 2.0B:USB ...
    
			
    9. 
						
  9. Swift 关键字 inout - 让值类型以引用方式传递
			
    两种参数传递方式 值类型 传递的是参数的一个副本,这样在调用参数的过程中不会影响原始数据. 引用类型 把参数本身引用(内存地址)传递过去,在调用的过程会影响原始数据. 在 Swift 众多数据类型中, ...
    
			
    10. 
						
  10. Android ListView setEmptyView
			
    http://my.eoe.cn/yaming/archive/879.html 1 当我们使用ListView或GridView的时候,当列表为空的时候,我们需要一个特殊的View来提示用户操作,于 ...
    
			
    11.