zoukankan      html  css  js  c++  java
  • 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{
        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- 1px;
        border-color: gray;
    }
    .table-result td{
        text-align:center;
        height:40px;
        font-size:12px;
        line-height:22px;
        color:#4e4e4e;
        border-style: solid;
        border- 1px;
        border-color: gray;
        padding-left: 2px;
        padding-right:2px;
    }
    td
    {
    white-space:nowrap;
    
    }
    </style>
    </head>
    <body style=" 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!="
    	
    	"){
    			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;100%;'>"+item+"</th>";
    						tr1+="<td align=center style='height:15px;100%;'>"+json[j][item]+"</td>";
    					}else
    					{
    						t1+="<td align=center style='height:15px;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>
    

      

  • 相关阅读:
    centos7.5部署mysql cluster NDB总结
    读《构建之法》13--17章有感
    读《构建之法》8--10章
    作业5.2
    作业5.1
    读《构建之法》6--7章读后感
    做汉堡,做汉堡
    《构建之法》1—5章读后感
    第二次作业
    1
  • 原文地址:https://www.cnblogs.com/snow365/p/6425453.html
Copyright © 2011-2022 走看看