JSON数据转换成table表格
程序员文章站
2022-03-01 23:33:46
<%@ page contenttype="text/html; charset=utf-8" %>
<%@taglib uri="/struts-tags" prefix="...
<%@ 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>