漂亮的表格样式;jQuery清楚表格所有行;js解析后台传过来的JSON数据;动态生成表格数据

一 : 先看看漂亮的表格

css代码:

.mylist  

{  

    width: auto;  

    height:auto;  

    border:1px solid #accdf4;  

    margin-top:10px;  

    font-family:"宋体";  

    font-size:12px;  

    color:#155c9f;  

    text-align:center;  

    border-collapse: collapse;  

}  

.mylist th  

{  

    background-color:#d0e4ff;  

    text-align:center;  

    border-right:1px solid #accdf4;   

    border-bottom:1px solid #accdf4;  

    text-align:center;  

    height:25px;  

    line-height:25px;  

    width:100px;  

}  

.mylist td  

{  

    border-right:1px solid #accdf4;   

    text-align:center;  

    height:25px;  

    line-height:25px;  

    width:100px;  

Html代码:

<table class="mylist">  

   <tr>  

      <th>选择</th>  

      <th>报送单位</th>  

      <th>报送月份</th>  

      <th>事故类型</th>  

      <th>报送时间</th>  

   </tr>  

   <tr>  

     <td ><input type="checkbox" /></td>  

     <td>&nbsp;广州市</td>  

     <td>&nbsp;2010年10月</td>  

     <td>&nbsp;公路事故月报</td>  

     <td>&nbsp;2010年11月8日 17:30</td>  

   </tr>  

   <tr style="background-color:#eeeeee;">  

     <td ><input type="checkbox" /></td>  

     <td>&nbsp;广州市</td>  

     <td>&nbsp;2010年10月</td>  

     <td>&nbsp;公路事故月报</td>  

     <td>&nbsp;2010年11月8日 17:30</td>  

   </tr>  

   <tr>  

     <td ><input type="checkbox" /></td>  

     <td>&nbsp;广州市</td>  

     <td>&nbsp;2010年10月</td>  

     <td>&nbsp;公路事故月报</td>  

     <td>&nbsp;2010年11月8日 17:30</td>  

   </tr>  

   <tr style="background-color:#eeeeee;">  

     <td ><input type="checkbox" /></td>  

     <td>&nbsp;广州市</td>  

     <td>&nbsp;2010年10月</td>  

     <td>&nbsp;公路事故月报</td>  

     <td>&nbsp;2010年11月8日 17:30</td>  

   </tr>  

</table> 

效果图:

技术分享

 

 

二:如何使用JQuery清楚表格的数据

   $("#tableid  tr:not(:first)").empty()// 只留第一行数据

    $("#tableid  tr").empty()//清楚所有数据

 

三 : js里面解析后台传来的JSON数据

   看看后台怎么传来的

       后台:

        HashMap<String,Object> hash_obj = new HashMap<String,Object>();

        hash_obj.put("status", true);
        hash_obj.put("descr","成功");
        hash_obj.put("data",hash_endInfo);

        //添加审批历史记录信息
        List<Map<String,Object>> list = getAllTaskInforByProcessId(processinstanceid);
        if(list.size()>0){
            hash_obj.put("dataOfRecordList",list);
        }
        setTextAjax(org.json.simple.JSONObject.toJSONString(hash_obj));

      

       前台解析:

function xiangQing_YJS(processInstanceId,END_apply_DT,BGN_apply_DT){
    $.ajax({
        url:"<%=basePath%>test/test_ActivitiZLZZSQ_EndInfoNEW.action",
        type: "POST",
        async:false,
        data:{"processInstanceId":processInstanceId},
        success:function(data){
            var value = eval(‘(‘ + data + ‘)‘);
            if (value.status == true) {

                var recordList = value.dataOfRecordList;//得到数据
                //alert(recordList.length);

               //获取数据的格式:recordList[i].this_date  、recordList[i].this_emplid

              //拼接HTML字符串

 var trs =  ‘<tr><th>时间</th><th>用户</th><th>操作</th><th>结果</th></tr>‘  //这是表格的标题头
                for(var i=0;i<recordList.length;i++){
                    if(i%2 == 0){  //这是 为了实现各行变色   style="background-color:#eeeeee;"
                        var tr = "";
                        tr = ‘<tr><td>‘+recordList[i].this_date+‘</td><td>‘+recordList[i].this_emplid+‘</td>                       <td>‘+recordList[i].this_taskName+‘</td<td>‘+recordList[i].this_commit_text+‘</td></tr>‘
                        trs = trs+tr;
                    }else{
                        var tr = "";
                        tr = ‘<tr style="background-color:#eeeeee;"><td>‘+recordList[i].this_date+‘</td><td>‘+recordList[i].this_emplid+‘</td><td>‘+recordList[i].this_taskName+‘</td><td>‘+recordList[i].this_commit_text+‘</td></tr>‘
                        trs = trs+tr;
                    }

                }
                $("#processOptionRecordTable").append(trs);

 

               }  

 

 

 


 

Html代码  技术分享
  1. .mylist  
  2. {  
  3.     width: auto;  
  4.     height:auto;  
  5.     border:1px solid #accdf4;  
  6.     margin-top:10px;  
  7.     font-family:"宋体";  
  8.     font-size:12px;  
  9.     color:#155c9f;  
  10.     text-align:center;  
  11.     border-collapse: collapse;  
  12. }  
  13. .mylist th  
  14. {  
  15.     background-color:#d0e4ff;  
  16.     text-align:center;  
  17.     border-right:1px solid #accdf4;   
  18.     border-bottom:1px solid #accdf4;  
  19.     text-align:center;  
  20.     height:25px;  
  21.     line-height:25px;  
  22.     width:100px;  
  23. }  
  24. .mylist td  
  25. {  
  26.     border-right:1px solid #accdf4;   
  27.     text-align:center;  
  28.     height:25px;  
  29.     line-height:25px;  
  30.     width:100px;  

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。