根据需求由于不同的表要在同一个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. FileStream和BinaryReader,BinaryWriter,StreamReader,StreamWriter的区别
			
    FileStream对于在文件系统上读取和写入文件非常有用,FileStream缓存输入和输出,以获得更好的性能.FileStream对象表示在磁盘或网络路径上指向文件的流.这个类提供了在文件中读写字 ...
    
			
    2. 
						
  2. Android的handler消息机制
			
    Hnadler机制中有这么几部分构成,包括 handler.Message.Looper和MessageQueue.要想在一个线程中使用Handler的话必须要有Looper和MessageQueue ...
    
			
    3. 
						
  3. [转]如何在 TFS 中使用 Git
			
    本文转自 http://www.cnblogs.com/stg609/p/3651688.html 对 Charley Blog 的代码进行版本控制的想法由来已久,在代码建立之初其实已经使用过 TFS ...
    
			
    4. 
						
  4. 使用Kotlin，抛弃findViewById
			
    有没有觉得Android的findViewById挺烦人的.使用Kotlin可以让你彻底抛弃这个烦恼 步骤1.在build.gradle(Module:app)中添加如下一句话 这个在老一点版本的An ...
    
			
    5. 
						
  5. oracle 创建表
			
    --创建表 create table browser_track( btId number not null , opend_id ) not null, url_address ) not null ...
    
			
    6. 
						
  6. IIS ARR设置HTTP跳转到HTTPS
			
    GUI Version - Select the website you wish to configure- In the “Features View” panel, double click U ...
    
			
    7. 
						
  7. 提高SQL查询效率 的10大方法
			
    一.查询条件精确,针对有参数传入情况 二.SQL逻辑执行顺序 FROM–>JOIN–>WHERE–>GROUP–>HAVING–>DISTINCT–>ORDER–& ...
    
			
    8. 
						
  8. cookie设置和读取以及获取超链接参数
			
    function setCookie(c_name, value, expiredays) { var exdate = new Date() exdate.setDate(exdate.getDat ...
    
			
    9. 
						
  9. Matlab基础之单元数组和结构数组
			
    Matlab基础之单元数组和结构数组 前言: 单元数组和结构数组是一种新的数据类型,能将不同类型.不同维数的数组组合在一起,从而方便对不同的数据类型方便管理和维护. 如上图所示的2*2矩阵中,分别存储 ...
    
			
    10. 
						
  10. 泛型术语：占位类型placeholder
			
    Here’s a generic version of the same code: struct Stack<Element> { var items = [Element]() mut ...
    
			
    11.