欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JSON数据转换成table表格

程序员文章站 2022-06-09 20:42:53
<%@ 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>

　　

上一篇： RACK与TACK的区别

下一篇： 自动刷新从BrowserSync开始

推荐阅读