1. <%@ page contentType="text/html; charset=UTF-8" %>
  2. <%@taglib uri="/struts-tags" prefix="s"%>
  3. <%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
  4. <%
  5. 	String path =request.getContextPath();
  6. 	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
  7. %>
  8. <html>
  9. <head>
  10. <title></title>
  11.  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  12.  <script type="text/javascript" src="<%=basePath %>js/jquery-1.9.1.js"></script>
  13.  
  14. <style type="text/css">
  15. .table-result{
  16.     width:100%;
  17.     border:1px solid #f2f2f2;
  18.     text-align:left;
  19.     border-collapse: collapse;
  20. }
  21. .table-result th{
  22.     height:40px;
  23.     font-weight: normal;
  24.     font-size:14px;
  25.     line-height:22px;
  26.     text-align:center;
  27.     background-color:#f0f0f0;
  28.     border-right:2px solid #fff;
  29.     color:#4e4e4e;
  30.     border-style: solid;
  31.     border-width: 1px;
  32.     border-color: gray;
  33. }
  34. .table-result td{
  35.     text-align:center;
  36.     height:40px;
  37.     font-size:12px;
  38.     line-height:22px;
  39.     color:#4e4e4e;
  40.     border-style: solid;
  41.     border-width: 1px;
  42.     border-color: gray;
  43.     padding-left: 2px;
  44.     padding-right:2px;
  45. }
  46. td
  47. {
  48. white-space:nowrap;
  49.  
  50. }
  51. </style>
  52. </head>
  53. <body style="width: 100%;overflow: scroll;">
  54.  
  55. 	<form action="upload!view.dhtml" method="post" style="margin-left:10px;">
  56. 	  <h2>原始记录</h2>
  57. 	      	<textarea id="origrec" rows="5" cols="80">${logQueryDataModel.origrec }</textarea>
  58. 	   <h2>最新记录</h2>
  59.       		<textarea id="lastrec" rows="5" cols="80">${logQueryDataModel.lastrec}</textarea>
  60.     </form>
  61. </body>
  62. </html>
  63. <script>
  64. $(document).ready(function(){
  65.  
  66. 	$("textarea").each(function(i){
  67. 		var p = $(this).text();
  68. 		if($.trim(p)=="") $(this).replaceWith("");
  69. 		if(p!="\n\t\n\t"){
  70. 			var json;
  71. 			try{
  72. 				json = JSON.parse(p);
  73. 			var id="";
  74. 			if($(this).attr("id")!= null)
  75. 				id="id="+$(this).attr("id");
  76. 			var t1="<table class=table-result "+id+" ><thead><tr>";
  77. 			var flag=0;
  78. 			var tr1="<tr>";
  79. 			for(var j in json)
  80. 			{
  81. 				if(flag>0)
  82. 				{
  83. 					t1+="<tr>";
  84. 				}
  85. 				for(var item in json[j])
  86. 				{
  87. 					if(flag==0)
  88. 					{
  89. 						if(item!="")
  90. 							t1+="<th class=center style='font-size:10px;height:15px;width:100%;'>"+item+"</th>";
  91. 						tr1+="<td align=center style='height:15px;width:100%;'>"+json[j][item]+"</td>";
  92. 					}else
  93. 					{
  94. 						t1+="<td align=center style='height:15px;width:100%;'>"+json[j][item]+"</td>";
  95. 					}
  96. 				}
  97. 				if(flag==0)
  98. 					t1+="</tr></thead>"+tr1+"</tr>";
  99. 				else
  100. 					t1+="</tr>";
  101. 				flag++;
  102. 			}
  103. 			$(this).replaceWith(t1);
  104. 			}catch(e)
  105. 			{
  106. 			}
  107. 		}
  108. 	});
  109. 	var flag = 0;
  110. 	$("textarea").each(function(i){
  111. 		$(this).prev().remove();
  112. 		$(this).remove();
  113. 		flag+=1;
  114. 	});
  115. 	if(flag==2)
  116. 	{
  117. 		$("form").html("<h3>（此操作无详细数据）</h3>");
  118. 	}
  119. 	if(flag==1)
  120. 	{
  121. 		var ts = $("table[id$=rec]");
  122. 		for(var i=0;i<ts.length;i+=2)
  123. 		{
  124. 			for(var c=0;c<ts[i].rows[1].cells.length;c++)
  125. 			{
  126. 				var a = ts[i].rows[1].cells[c].innerText;
  127. 				var b = ts[i+1].rows[1].cells[c].innerText;
  128. 				if(a!=b)
  129. 				{
  130. 					ts[i].rows[1].cells[c].style.backgroundColor='gray';
  131. 					ts[i].rows[1].cells[c].style.color='white';
  132. 					ts[i+1].rows[1].cells[c].style.backgroundColor='gray';
  133. 					ts[i+1].rows[1].cells[c].style.color='white';
  134. 				}else if(a==""&&b=="")
  135. 				{
  136. 					ts[i].rows[0].cells[c].style.display='none';
  137. 					ts[i+1].rows[0].cells[c].style.display='none';
  138. 					ts[i].rows[1].cells[c].style.display='none';
  139. 					ts[i+1].rows[1].cells[c].style.display='none';
  140. 				}
  141. 			}
  142. 		}
  143. 		}
  144. });
  145.  
  146. </script>

　　

JSON数据转换成table表格的更多相关文章

  1. 【转】C#中将JSon数据转换成实体类，将实体类转换成Json

    http://wo13145219.iteye.com/blog/2022667 http://json2csharp.chahuo.com/ using System; using System.C ...

  2. 利用JAVA反射机制将JSON数据转换成JAVA对象

    net.sf.json.JSONObject为我们提供了toBean方法用来转换为JAVA对象, 功能更为强大,  这里借鉴采用JDK的反射机制, 作为简单的辅助工具使用,   有些数据类型需要进行转 ...

  3. 将JSON数据转换成JAVA的实体类

    思路:首先将JSON格式的数据转换成JSONObject,然后将JSONObject转换成Java的实体类(其中类属性包括List等类型) Java实体类: SearchFilter 类 1 publ ...

  4. python - 将数据转换成 excl 表格, json 等文件 （dajngo - 打开网页后自动下载）

    本篇只讲述怎么用. 具体 tablib  更多详细用法可参考博客 : https://blog.csdn.net/liangyuannao/article/details/41476277 # 不得不 ...

  5. 怎么把后台传过来的Json拼成table 用Jquery ajax()

    页面上的表格定义:<table id="tableId"></table> js中的代码:var $parent0 = $('#tableId);//获取页 ...

  6. 把HDFS里的json数据转换成csv格式

      1. 全景图 2. 用ListHDFS获取所有文件名   如果想重新再取一次,右健view state:   点击 clear state, 再运行,即可再次采集数据了.   3. 用FetchH ...

  7. 【转】参照protobuf，将json数据转换成二进制在网络中传输。

    http://blog.csdn.net/gamesofsailing/article/details/38335753?utm_source=tuicool&utm_medium=refer ...

  8. C#实现调用接口数据获取数据格式化XML、json转成Table的方法

    废话不多说,直接上代码: json 格式化转DataTable: result为从接口得到的数据,格式化json的方法主要来自Newtonsoft.Json JObject joUnit = JObj ...

  9. 把json数据转换成集合

    Sting MessageList="";JSONArray json = JSONArray.fromObject(MessageList);JSONObject object ...

随机推荐

  1. JAVA 抽象类、接口

    一.抽象类 1.语法定义 在类前面使用 abstract 修饰的类就是抽象类 2.应用场景: (1)在某些情况下,某个父类只是知道其子类应该包含怎样的方法,但无法准确知道这些子类如何实现这些方法. ( ...

  2. 《HBase权威指南》学习笔记

    第一章  简介 背景: GFS:集群存储海量数据,数据在节点间冗余复制,即使一台存储服务器发生故障,也不会影响可用性. GFS的缺点:适合存储少许非常大的文件,而不适合存储大量小文件,因为文件的元数据 ...

  3. GO基本数据结构练习:数组，切片，映射

    按<GO IN ACTION>的书上进行. 应该是第二次了哦~~ package main import ( "fmt" ) func main() { array : ...

  4. mysql建立自增主键的插入，及自动插入当前时间

    MYSQL里用这两个字段,几乎都是必须的. 以前都是自动建立的,现在手把手建立的时候,就要找资料来搞定了. 参考URL: http://blog.csdn.net/Weicleer/article/d ...

  5. MySQL的表管理

    首先,先选择数据库(极其特别重要,如果不选择,将默认为第一个数据库) mysql > use db_name; 查看所有表 mysql > show tables; 1.创建表 creat ...

  6. 字典dict常用方法

    字典是列表中常用的方法,我们经常处理字典,字典嵌套,很多复杂的操作都来自于基础,只是改变了样式而已,本质是不变的.下面来看看字典中常用的功能都有那些:     1.clear(self) def cl ...

  7. 易普优APS高级计划排程系统系列提纲：行业知识，业务建模，排程算法，计划可视化，平台框架，案例分享

    专注于高级计划排程系统研发与实施10来年了,国内外各种APS软件基本都研究过,这里列个提纲主要从6个方面跟大家一起讨论分享,欢迎大家鼓掌或拍砖 易普优APS高级计划排程系统系列001:行业知识,APS ...

  8. SpringBoot入门系列

    集合redis,mysql,测试例子 http://blog.csdn.net/lxhjh/article/details/51764604

  9. React Native踩坑之Unable to load script from assets

    报错: Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged corr ...

  10. HDU 6052 To my boyfriend（概率 贡献）

    To my boyfriend Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...