JSON数据转换成table表格
<%@ page contentType="text/html; charset=UTF-8" %>
<%@taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jstl/core" prefix="c"%>
<%
String path =request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath %>js/jquery-1.9.1.js"></script> <style type="text/css">
.table-result{
width:100%;
border:1px solid #f2f2f2;
text-align:left;
border-collapse: collapse;
}
.table-result th{
height:40px;
font-weight: normal;
font-size:14px;
line-height:22px;
text-align:center;
background-color:#f0f0f0;
border-right:2px solid #fff;
color:#4e4e4e;
border-style: solid;
border-width: 1px;
border-color: gray;
}
.table-result td{
text-align:center;
height:40px;
font-size:12px;
line-height:22px;
color:#4e4e4e;
border-style: solid;
border-width: 1px;
border-color: gray;
padding-left: 2px;
padding-right:2px;
}
td
{
white-space:nowrap; }
</style>
</head>
<body style="width: 100%;overflow: scroll;"> <form action="upload!view.dhtml" method="post" style="margin-left:10px;">
<h2>原始记录</h2>
<textarea id="origrec" rows="5" cols="80">${logQueryDataModel.origrec }</textarea>
<h2>最新记录</h2>
<textarea id="lastrec" rows="5" cols="80">${logQueryDataModel.lastrec}</textarea>
</form>
</body>
</html>
<script>
$(document).ready(function(){ $("textarea").each(function(i){
var p = $(this).text();
if($.trim(p)=="") $(this).replaceWith("");
if(p!="\n\t\n\t"){
var json;
try{
json = JSON.parse(p);
var id="";
if($(this).attr("id")!= null)
id="id="+$(this).attr("id");
var t1="<table class=table-result "+id+" ><thead><tr>";
var flag=0;
var tr1="<tr>";
for(var j in json)
{
if(flag>0)
{
t1+="<tr>";
}
for(var item in json[j])
{
if(flag==0)
{
if(item!="")
t1+="<th class=center style='font-size:10px;height:15px;width:100%;'>"+item+"</th>";
tr1+="<td align=center style='height:15px;width:100%;'>"+json[j][item]+"</td>";
}else
{
t1+="<td align=center style='height:15px;width:100%;'>"+json[j][item]+"</td>";
}
}
if(flag==0)
t1+="</tr></thead>"+tr1+"</tr>";
else
t1+="</tr>";
flag++;
}
$(this).replaceWith(t1);
}catch(e)
{
}
}
});
var flag = 0;
$("textarea").each(function(i){
$(this).prev().remove();
$(this).remove();
flag+=1;
});
if(flag==2)
{
$("form").html("<h3>（此操作无详细数据）</h3>");
}
if(flag==1)
{
var ts = $("table[id$=rec]");
for(var i=0;i<ts.length;i+=2)
{
for(var c=0;c<ts[i].rows[1].cells.length;c++)
{
var a = ts[i].rows[1].cells[c].innerText;
var b = ts[i+1].rows[1].cells[c].innerText;
if(a!=b)
{
ts[i].rows[1].cells[c].style.backgroundColor='gray';
ts[i].rows[1].cells[c].style.color='white';
ts[i+1].rows[1].cells[c].style.backgroundColor='gray';
ts[i+1].rows[1].cells[c].style.color='white';
}else if(a==""&&b=="")
{
ts[i].rows[0].cells[c].style.display='none';
ts[i+1].rows[0].cells[c].style.display='none';
ts[i].rows[1].cells[c].style.display='none';
ts[i+1].rows[1].cells[c].style.display='none';
}
}
}
}
}); </script>
JSON数据转换成table表格的更多相关文章
- 【转】C#中将JSon数据转换成实体类，将实体类转换成Json
http://wo13145219.iteye.com/blog/2022667 http://json2csharp.chahuo.com/ using System; using System.C ...
- 利用JAVA反射机制将JSON数据转换成JAVA对象
net.sf.json.JSONObject为我们提供了toBean方法用来转换为JAVA对象, 功能更为强大, 这里借鉴采用JDK的反射机制, 作为简单的辅助工具使用, 有些数据类型需要进行转 ...
- 将JSON数据转换成JAVA的实体类
思路:首先将JSON格式的数据转换成JSONObject,然后将JSONObject转换成Java的实体类(其中类属性包括List等类型) Java实体类: SearchFilter 类 1 publ ...
- python - 将数据转换成 excl 表格, json 等文件 （dajngo - 打开网页后自动下载）
本篇只讲述怎么用. 具体 tablib 更多详细用法可参考博客 : https://blog.csdn.net/liangyuannao/article/details/41476277 # 不得不 ...
- 怎么把后台传过来的Json拼成table 用Jquery ajax()
页面上的表格定义:<table id="tableId"></table> js中的代码:var $parent0 = $('#tableId);//获取页 ...
- 把HDFS里的json数据转换成csv格式
1. 全景图 2. 用ListHDFS获取所有文件名 如果想重新再取一次,右健view state: 点击 clear state, 再运行,即可再次采集数据了. 3. 用FetchH ...
- 【转】参照protobuf，将json数据转换成二进制在网络中传输。
http://blog.csdn.net/gamesofsailing/article/details/38335753?utm_source=tuicool&utm_medium=refer ...
- C#实现调用接口数据获取数据格式化XML、json转成Table的方法
废话不多说,直接上代码: json 格式化转DataTable: result为从接口得到的数据,格式化json的方法主要来自Newtonsoft.Json JObject joUnit = JObj ...
- 把json数据转换成集合
Sting MessageList="";JSONArray json = JSONArray.fromObject(MessageList);JSONObject object ...
随机推荐
- [实战]MVC5+EF6+MySql企业网盘实战(18)——文件上传，下载，修改
写在前面 经过一段时间的秀秀改改,终于把文件上传下载,修改文件夹文件名称的功能实现了. 系列文章 [EF]vs15+ef6+mysql code first方式 [实战]MVC5+EF6+MySql企 ...
- LoadRunner监控Linux资源
一.LoadRunner监控Linux资源 (一).准备工作 首先,监视Linux一定要有rstatd这个守护进程,有的Linux版本里也有可能是rpc.rstatd这里只是名字不同而已,功能是一样的 ...
- Oracle 子查询和组函数练习
SELECT * FROM emp; SELECT * FROM dept; 1.查询公司员工工资的最大值,最小值,平均值和总和. SELECT MAX(sal) AS 工资最大值, MIN(sal) ...
- 洛谷P1345 [USACO5.4]奶牛的电信 [最小割]
题目传送门 奶牛的电信 题目描述 农夫约翰的奶牛们喜欢通过电邮保持联系,于是她们建立了一个奶牛电脑网络,以便互相交流.这些机器用如下的方式发送电邮:如果存在一个由c台电脑组成的序列a1,a2,..., ...
- js代码小优化
今天真坑,老大请了两天假,来了之后指指点点,不过人家说的倒是很是到位 好不容易把嵌套小窗口登陆注册功能,做完了,直接调之前写好的登陆注册功能,也就是页面跳转 并不是ajax异步登陆 说让改成ajax ...
- hihocoder #1580 : Matrix （DP）
#1580 : Matrix 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Once upon a time, there was a little dog YK. On ...
- 什么情况下调用doGet()和doPost()？
Jsp页面中的FORM标签里的method属性为get时调用doGet(),为post时调用doPost().
- Redis学习篇（十）之排序
SORT 按照键值从小到大或者从大到小的顺序进行排序 对数字进行排序 语法:SORT key [DESC] 默认情况下,是升序排序,可以指定DESC进行降序排序 对字母进行排序 语法:SORT key ...
- java8新特性——接口中的静态方法与默认方法
以前我们知道,接口中的方法必须时抽象方法,而从 java8 开始接口中也可以有方法的实现了,叫做默认方法. 一 .默认方法(default修饰) 在 java8 中,因为存在函数式接口,一个接口中只能 ...
- SPOJDRUIDEOI - Fata7y Ya Warda!【单调栈】
题目链接[http://www.spoj.com/problems/DRUIDEOI/en/] 题意:给出n个数,从1到n围城一个环(1和n相连),求每个数左边第一个比他大的第一个下标,右边第一个比他 ...