JSON数据转换成table表格_编辑器

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>