`
happy100583
  • 浏览: 122169 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

js 排序

阅读更多

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>绩效考核公布栏</title>
 <style type="text/css">
  body{
   padding: 0;
   padding-top:10px;
   padding-bottom:30px;
   margin: 0;
   text-align:center;
  }
  table{
   width:100%;
   border-collapse:collapse;
  }
  table tr td{
   text-align:center;
   font-size:12px;
   border: 1px solid #78aad7;
   line-height:1.5em;
  }
  .main_table{
   width:96%;
   margin-bottom:15px;
   margin-left:1%;
   float:left;
  }
  .small_table{
   width:31.3%;
  }
  .sort_handle{
   cursor:pointer;
  }
 </style>

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
  //为了排序重新构造跨多行的‘数据行’
  function reBuildTable(obj){
   var rowSpan=1;
   var td;
   obj.find("tr").each(function(){
    if(rowSpan==1){
     $(this).find("td[class='col_1']").each(function(){
      rowSpan = $(this).attr("rowSpan");
      $(this).removeAttr("rowSpan");
      $(this).removeClass("col_1");
      td = $(this);
     });
    }else{
     $(this).prepend(td.clone(true));
     rowSpan = rowSpan-1;
    }
   });
  }
  
  //排序
  function sort(obj,type){
   var table = obj.parents(".main_table");
   var col = obj.attr("col")
   var dataTr = new Array();
   var data;
   reBuildTable(table);
   table.find("tr").each(function(){
    if($(this).find("td[col]").length==0){
     dataTr[dataTr.length] = $(this);
    }
   });
   for(var i=0;i<dataTr.length;i++){
    for(var j=i;j>0;j--){
     var sortType;
     var data1 = (dataTr[j].find("td:eq("+col+")").html());
     var data2 = (dataTr[j-1].find("td:eq("+col+")").html());
     
     if(!isNaN(parseInt(data1)) && !isNaN(parseInt(data2))){
      sortType = type=="desc" ? parseInt(data1) > parseInt(data2) : parseInt(data1) < parseInt(data2);
     }else{
      sortType = type=="desc" ? data1 > data2 : data1 < data2;
     }

     if(sortType){
      dataTr[j-1].before(dataTr[j]);
      data = dataTr[j-1];
      dataTr[j-1] = dataTr[j];
      dataTr[j] = data;
     }
    }
   }
  }

  $(document).ready(function(){
   //样式化标题
   $(document).find(".main_table").each(function(){
    $(this).find("TD").each(function(i){
     if(i==0){
      $(this).css({"line-height":"1.5em","background-color":"#78aad7",
      "color":"#FFF","font-size":"14px","font-weight":"bold"});
     }
    });
   });

   //样式化小标题
   $(".main_table .sub_title_td").css("color","#888")

   //行经过样式
   $(".main_table tr").hover(
    function(){
     if($(this).find("td[class*='sort_handle']").length==0){
      $(this).css("background-color","#a1c2df");
     }
    },
    function(){
     if($(this).find("td[class*='sort_handle']").length==0){
      $(this).css("background-color","transparent");
     }
    }
   );
   
   //'sort_handle'提示
   
   $(document).find(".sort_handle").each(function(){
    $(this).attr("title","单击对‘"+$(this).html()+"’列排序");
    $(this).prepend("&nbsp;<button style='border:1px solid #FFF;height:16px;line-height:6px;visibility:hidden;'>∨</button>");
    $(this).append("&nbsp;<button style='border:1px solid #FFF;height:16px;visibility:hidden;'>∧</button>");
   });
   
   //'sort_handle'经过样式
   $(".sort_handle").hover(
    function(){
     $(this).find("button:eq(1)").css("visibility","visible")
     $(this).css("background-color","#a1c2df");
     $(this).css("color","#FFF");
    },
    function(){
     $(this).find("button:eq(1)").css("visibility","hidden")
     $(this).css("background-color","transparent");
     $(this).css("color","#888"); 
    }
   );

   //排序
   $(".sort_handle").toggle(
    //desc
    function(){
     sort($(this),"desc");
     $(this).find("button:eq(1)").html("∨").blur();

    },
    //asc
    function(){
     sort($(this),"asc");
     $(this).find("button:eq(1)").html("∧").blur();
    }
   );
  });
 </script>
</head>
<body>
 <table class="main_table">
  <tr><td col=-1 colspan=7>部门考核成绩</td></tr>
  <tr><td col=0 rowSpan=2 class="sub_title_td sort_handle">部门类别</td>
   <td col=1 rowSpan=2 class="sub_title_td sort_handle">部门名称</td>
   <td colspan=5 class="sub_title_td">成绩</td></tr>
  <tr><td col=2 class="sub_title_td sort_handle">第一季度</td>
   <td col=3 class="sub_title_td sort_handle">第二季度</td>
   <td col=4 class="sub_title_td sort_handle">第三季度</td>
   <td col=5 class="sub_title_td sort_handle">第四季度</td>
   <td col=6 class="sub_title_td sort_handle">全年</td></tr>
  
  <tr><td rowSpan=5 class="col_1">业务部门</td><td>立案庭</td><td>a</td><td>12</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>司法事务室</td><td>b</td><td>1</td><td>80</td><td>80</td><td>310</td></tr>
  <tr><td>民一庭</td><td>c</td><td>0</td><td>80</td><td>80</td><td>300</td></tr>
  <tr><td>民二庭</td><td>d</td><td>23123</td><td>80</td><td>80</td><td>340</td></tr>
  <tr><td>民三庭</td><td>e</td><td>23.233</td><td>80</td><td>80</td><td>350</td></tr>

  <tr><td rowSpan=6 class="col_1">综合部门</td><td>执行局</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>政治处</td><td>f</td><td>11.33</td><td>80</td><td>80</td><td>360</td></tr>
  <tr><td>监察室</td><td>g</td><td>80</td><td>80</td><td>80</td><td>370</td></tr>
  <tr><td>研究室</td><td>h</td><td>123.6</td><td>80</td><td>80</td><td>380</td></tr>
  <tr><td>办公室</td><td>jbc</td><td>33.9</td><td>80</td><td>80</td><td>390</td></tr>
  <tr><td>督导办</td><td>jaa</td><td>80</td><td>80</td><td>80</td><td></td></tr>
  <tr><td col=-1 colspan=7>
   备注:立案庭、司法事务室考核满分为70分;审判部门、执行局每季度考核满分为7分,上半年合计14分;综合部门考核满分为40分。
  </td></tr>
 </table>

 <table class="main_table">
  <tr><td col=-1 colspan=7>法官、执行人员考核成绩</td></tr>
  <tr><td col=0 rowSpan=2  class="sub_title_td sort_handle">庭室</td>
   <td col=1 rowSpan=2  class="sub_title_td sort_handle">人员</td>
   <td colspan=5 class="sub_title_td">成绩</td></tr>
  <tr><td col=2 class="sub_title_td sort_handle">第一季度</td>
   <td col=3 class="sub_title_td sort_handle">第二季度</td>
   <td col=4 class="sub_title_td sort_handle">第三季度</td>
   <td col=5 class="sub_title_td sort_handle">第四季度</td>
   <td col=6 class="sub_title_td sort_handle">全年</td></tr>

  <tr><td rowSpan=2 class="col_1">立案庭</td><td>韩悦秋</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>叶美魁</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td rowSpan=3 class="col_1">民一庭</td><td>贺冬红</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>李之光</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>陈静鹊</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td rowSpan=4 class="col_1">民二庭</td><td>王远</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>逄政</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>赖晖</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td>张艳</td><td>80</td><td>80</td><td>80</td><td>80</td><td>320</td></tr>
  <tr><td col=-1 colspan=7>备注:法官、执行员每季度考核满分为7分,上半年合计满分为14分。</td></tr>
 </table>

 <table class="main_table">
  <tr><td col=-1 colspan=3>综合部门人员考核成绩</td></tr>
  <tr><td col=0 class="sub_title_td sort_handle">部门</td>
   <td col=1 class="sub_title_td sort_handle">人员</td>
   <td col=2 class="sub_title_td sort_handle">成绩</td></tr>

  <tr><td rowSpan=3 class="col_1">政治处</td><td>李琴</td><td>16</td></tr>
  <tr><td>徐雪萍</td><td>16</td></tr>
  <tr><td>罗丽华</td><td>16</td></tr>
  <tr><td rowSpan=4 class="col_1">监察室</td><td>方惠琼</td><td>16</td></tr>
  <tr><td>曾旭华</td><td>16</td></tr>
  <tr><td>曹振海</td><td>16</td></tr>
  <tr><td>姚兵</td><td>16</td></tr>
  <tr><td col=-1 colspan=3>备注:满分为40分。</td></td>
 </table>

 <table class="main_table">
  <tr><td col=-1 colspan=3>法官助理、书记员考核成绩</td></tr>
  <tr><td col=0 class="sub_title_td sort_handle">部门</td>
   <td col=1 class="sub_title_td sort_handle">人员</td>
   <td col=2 class="sub_title_td sort_handle">成绩</td></tr>

  <tr><td rowSpan=1 class="col_1">立案庭</td><td>雷英孝</td><td>16</td></tr>
  <tr><td rowSpan=4 class="col_1">民一庭</td><td>刘桂菊</td><td>16</td></tr>
  <tr><td>蒋雅琴</td><td>16</td></tr>
  <tr><td>陈琪</td><td>16</td></tr>
  <tr><td>韩利鹏</td><td>16</td></tr>
  <tr><td col=-1 colspan=3>备注:满分为70分。</td></td>
 </table>

 <table class="main_table small_table">
  <tr><td col=-1 colspan=2>立案庭人员考核成绩</td></tr>
  <tr><td col=0 class="sub_title_td sort_handle">人员</td>
   <td col=1 class="sub_title_td sort_handle">成绩</td></tr>

  <tr><td>张乐雄</td><td>16</td></tr>
  <tr><td>梁夏英</td><td>16</td></tr>
  <tr><td>陈玲</td><td>16</td></tr>
  <tr><td>欧阳倩</td><td>16</td></tr>
  <tr><td>徐瑞</td><td>16</td></tr>
  <tr><td col=-1 colspan=2>备注:满分为70分。</td></td>
 </table>

 <table class="main_table small_table">
  <tr><td col=-1 colspan=2>司法事务室人员考核成绩</td></tr>
  <tr><td col=0 class="sub_title_td sort_handle">人员</td>
   <td col=1 class="sub_title_td sort_handle">成绩</td></tr>

  <tr><td>曹勇</td><td>16</td></tr>
  <tr><td>林旭</td><td>16</td></tr>
  <tr><td>赵穗鸣</td><td>16</td></tr>
  <tr><td>张远平</td><td>16</td></tr>
  <tr><td>林丽娟</td><td>16</td></tr>
  <tr><td col=-1 colspan=2>备注:满分为70分。</td></td>
 </table>

 <table class="main_table small_table">
  <tr><td col=-1 colspan=2>执行局综合、调查人员考核成绩</td></tr>
  <tr><td col=0 class="sub_title_td sort_handle">人员</td>
   <td col=1 class="sub_title_td sort_handle">成绩</td></tr>

  <tr><td>何晓</td><td>11</td></tr>
  <tr><td>汤竟</td><td>12</td></tr>
  <tr><td>葛谢芳</td><td>13</td></tr>
  <tr><td>朱丽娇</td><td>14</td></tr>
  <tr><td>黄静</td><td>15</td></tr>
  <tr><td>何晓</td><td>16</td></tr>
  <tr><td>汤竟</td><td>17</td></tr>
  <tr><td>葛谢芳</td><td>18</td></tr>
  <tr><td>朱丽娇</td><td>19</td></tr>
  <tr><td>黄静</td><td>20</td></tr>
  <tr><td col=-1 colspan=2>备注:满分为70分。</td></td>
 </table>
</body>
</html>

分享到:
评论

相关推荐

    js排序算法动态展示

    js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js排序算法动态显示js...

    javascript排序表格

    javascript动态排序表格 javascript动态排序表格 javascript动态排序表格 javascript动态排序表格

    talbe使用js排序

    通过点击table表头,使用js排序 table js 排序

    sorttable.js 排序-方便实用的js排序,只需简单操作即可见到效果 Vue

    sorttable.js 排序-方便实用的js排序,只需简单操作即可见到效果 var stIsIE = /*@cc_on!@*/false; sorttable = { init: function() { // quit if this function has already been called if (arguments...

    javascript排序算法实现

    js排序算法实现 包括以下算法:冒泡排序 选择排序 插入排序 谢尔排序 快速排序(递归) 快速排序(堆栈) 归并排序 堆排序 从执行时间上可以很直观地看出各种排序的效率

    Js排序插件Sortable

    NULL 博文链接:https://hanxin0311.iteye.com/blog/2415481

    jquery.tablesorter js排序 页面物理排序

    jquery.tablesorter js排序 页面物理排序

    客户端使用JS排序数据列表

    通过使用Jquery在客户端使用JS排序数据列表..................

    js排序表格,实现按列排序

    套入表格,实现按列排序,含css样式,增强表格美观度。非常强大,非常好用,不容错过!

    js冒泡排序 js冒泡排序

    js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序js冒泡排序...

    用javascript实现的十大排序算法详解

    用javascript实现的十大排序算法详解

    9种不同的js排序方法

    系统自带的排序API,冒泡排序,快速排序,插入排序,选择排序,希尔排序,归并排序,堆排序,计数排序

    JavaScript排序二叉树

    简单的JavaScript排序二叉树,方便理解,由浅入深学习必备

    js排序方法

    js排序

    JavaScript html js Table排序

    程序的实现的是在客户端对表格进行排序,有以下特点: 1.自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序); 2.自定义排序函数; 3.可同时设置...

    sorttable.js 排序

    方便实用的js排序,只需简单操作即可见到效果

    table +js 排序

    在table中用js进行排序,对表格进行头部排序,最原始的版本,因下载积分过高,特再次编辑一下清空下载积分,以做共享只用.

    js汉字拼音排序

    多个js汉字拼音排序代码..js js排序 汉字排序 拼音排序 汉字拼音排序

    javascript排序分页(转载)

    JQuery实现数据的分页显示,同时实现表格内容的排序

    javascript排序函数实现数字排序

    javascript排序函数实现数字排序 [removed] function SortNumber(obj,func) //定义通用排序函数 { //参数验证,如果第一个参数不是数组或第二个参数不是函数则抛出异常 if(!(obj instanceof Array) || !(func ...

Global site tag (gtag.js) - Google Analytics