根据需求由于不同的表要在同一个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. AJPFX：关于面向对象的封装
			
    1.回顾        面向对象 -- 注重的是结果,强调的是具备功能的对象.        面向过程 -- 强调的是函数,注重的实现的过程.        函数:对功能的封装.            ...
    
			
    2. 
						
  2. 【Hibernate】对应各种数据库的方言
			
    
			
    3. 
						
  3. Java用SAX解析XML
			
    要解析的XML文件:myClass.xml <?xml version="1.0" encoding="utf-8"?> <class> ...
    
			
    4. 
						
  4. hihocoder1710 等差子数列
			
    思路: 将数列合并之后使用线段树.边界条件容易写错. 实现: #include <bits/stdc++.h> using namespace std; ; const int INF = ...
    
			
    5. 
						
  5. 正则表达式 - IP地址、Mac地址、端口、经纬度、车牌号码校验
			
    IP地址验证:   /^(\d|[1-9]\d|1\d{2}|2[0-5][0-5])\.(\d|[1-9]\d|1\d{2}|2[0-5][0-5])\.(\d|[1-9]\d|1\d{2}|2[0 ...
    
			
    6. 
						
  6. 【C++】异常简述(三):补充之如何看待C++异常
			
    C++异常的使用,我相信在上文总结的已经比较完整了,本文主要对C++异常这块进行额外的补充. 即使C++将异常纳入标准已经很多年了,但是直到现在都能看到很多坚持不显式使用异常.(包括本人在内,在写的代 ...
    
			
    7. 
						
  7. Farseer.net轻量级ORM开源框架 V1.x 入门篇：存储过程实体类映射
			
    导航 目   录:Farseer.net轻量级ORM开源框架 目录 上一篇:Farseer.net轻量级ORM开源框架 V1.x 入门篇:视图的数据操作 下一篇:Farseer.net轻量级ORM开源 ...
    
			
    8. 
						
  8. 服务器设置禁ping
			
    //设置Linux服务器禁ping!!!终端命令行直接输入 echo 1 >/proc/sys/net/ipv4/icmp_echo_ignore_all 这个是关闭ping的命令. 如果你想要 ...
    
			
    9. 
						
  9. CAD参数绘制多段线（网页版）
			
    多段线又被称为多义线,表示一起画的都是连在一起的一个复合对象,可以是直线也可以是圆弧并且它们还可以加不同的宽度. 主要用到函数说明: _DMxDrawX::PathLineTo 把路径下一个点移到指定 ...
    
			
    10. 
						
  10. 实现UAC对话框效果
			
    设置桌面全屏: int cxScreen,cyScreen; cxScreen=GetSystemMetrics(SM_CXSCREEN); cyScreen=GetSystemMetrics(SM_ ...
    
			
    11.