根据需求由于不同的表要在同一个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. Vue自定义过滤器格式化数字三位加一逗号
			
    <template> <div class="index-compont"> <div class="totalCount"> ...
    
			
    2. 
						
  2. 数据流和ByteArray
			
    问题:如何把一个long类型的数写进一个文件里 所以现在有DataInputStream和DataOutputStream 这两个是节点流 例子代码: import java.io.*; public ...
    
			
    3. 
						
  3. Tomcat源码分析----eclipse中搭建源码环境
			
    前提:JDK,至少1.7,ant,要设置ANT_HOME环境变量,需要再classpath中增加ant的lib目录,在path变量中增加ant的bin目录 1.官网下载tomcat源码包:apache ...
    
			
    4. 
						
  4. [BZOJ1061][Noi2008]志愿者招募 线性规划+费用流
			
    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1061 根据题意列方程,然后用网络流解线性规划. 题解直接贴ByVoid的吧,太神了:htt ...
    
			
    5. 
						
  5. (1) Jenkins + Subversion + Maven + TestNG - 软件
			
    软件需求 1 Jenkins http://jenkins-ci.org/ 2 Visual SVN Server https://www.visualsvn.com/server/ 3 Tortoi ...
    
			
    6. 
						
  6. VUE 入坑系列 一 事件
			
    html代码 <div id="app"> <button v-on:click="counter += 1">加1</butto ...
    
			
    7. 
						
  7. 【C++】朝花夕拾——表达式树
			
    表达式树: 叶子是操作数,其余结点为操作符,是二叉树的其中一种应用 ====================我是分割线====================== 一棵表达式树如下图: 若是对它做中序 ...
    
			
    8. 
						
  8. leetcode_894. All Possible Full Binary Trees
			
    https://leetcode.com/problems/all-possible-full-binary-trees/ 给定节点个数,求所有可能二叉树,该二叉树所有节点要么有0个子节点要么有两个子 ...
    
			
    9. 
						
  9. Importing Swift into Objective-C
			
    Overview You can work with types declared in Swift from within the Objective-C code in your project  ...
    
			
    10. 
						
  10. CLUSTER - 根据一个索引对某个表集簇
			
    SYNOPSIS CLUSTER indexname ON tablename CLUSTER tablename CLUSTER DESCRIPTION 描述 CLUSTER 指示PostgreSQ ...
    
			
    11.