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

js 排序

CSS360J#jQueryJavaScript 
阅读更多

<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>

分享到：
| window.print()打印功能
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    talbe使用js排序

    JavaScript排序原理 JavaScript提供了数组的`sort()`方法，可以对数组中的元素进行排序。在表格排序中，我们需要先获取表格中的数据，将其转换为数组，然后应用`sort()`方法，最后更新表格显示。 ### 3. 获取表格...

    Js排序插件Sortable

    总之，Sortable 是一个强大且灵活的JavaScript排序工具，它简化了拖放排序的实现，为开发者提供了丰富的功能和高度的自定义性。无论是简单的排序需求还是复杂的交互设计，Sortable 都能很好地胜任。通过深入学习和...

    js排序算法动态展示

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

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

    "js排序表格，实现按列排序"这个主题主要涉及JavaScript（js）如何用于实现对HTML表格的动态排序，同时结合CSS样式提升表格的美观度。 首先，我们需要理解HTML表格的基本结构，它由`&lt;table&gt;`标签定义，内部包含`...

    [转] JS 排序(包括按中文拼音排序) Google到的好东西,收藏!

    " 提供了一些关于JavaScript排序的实用技巧，包括如何对中文字符串按照拼音进行排序。在JavaScript的Array对象中，有一个内置方法`sort()`，它允许我们对数组进行排序，但默认排序规则是基于Unicode编码，对于中文...

    js排序

    你可以打开这个HTML文件，查看并运行其中的JavaScript代码，以更好地理解和实践JavaScript排序。 总结来说，JavaScript的`sort()`方法是数组排序的基础，通过自定义比较函数可以满足各种复杂的排序需求。同时，利用...

    javascript排序表格

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

    table +js 排序

    - `script.js`：实现了JavaScript代码，包括事件监听、数据获取、排序逻辑和更新表格等操作。 - `packed.js`：可能是一个压缩过的JavaScript文件，包含了一些优化或模块化的排序功能。 - `images`：目录可能包含了...

    js排序脚本

    在这个场景下，我们有一个经过优化的`sort.js`文件，可能是对原生JavaScript排序功能的一种改进。 在JavaScript中，`Array.prototype.sort()`方法是用于对数组进行排序的标准函数。默认情况下，它按照字典顺序...

    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...

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

    在本篇文章中，我们将深入探讨如何利用JQuery库来实现这个功能，同时也会涉及到一些基本的JavaScript排序原理。 首先，JQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和AJAX交互等任务。在处理...

    使用 JavaScript 排序数据并渲染到页面+源码+demo演示

    使用 JavaScript 排序数据并渲染到页面+源码+demo演示 使用 JavaScript 排序数据并渲染到页面+源码+demo演示 使用 JavaScript 排序数据并渲染到页面+源码+demo演示 使用 JavaScript 排序数据并渲染到页面+源码+...

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

    本篇文章将深入探讨如何使用JavaScript实现十大经典排序算法，帮助开发者更好地理解和运用这些算法。 1. 冒泡排序（Bubble Sort） 冒泡排序是一种简单的排序方法，通过重复遍历待排序的数组，比较相邻元素并交换...

    table 排序！js特效！很强大！简单易学

    然而，对于初学者，理解基础的JavaScript排序逻辑是十分重要的，这有助于更好地掌握前端开发技能。 总的来说，JavaScript实现的表格排序不仅能够提高用户对数据的浏览效率，还能提升网页的互动性。通过学习和实践，...

    重写Datatable.js，支持纯前台排序

    原生的Datatable.js库在某些情况下可能无法满足特定的前端排序需求，可能是由于其内置的排序算法不适用于特定的数据结构，或者与项目中的其他JavaScript库产生了冲突，导致控制逻辑变得复杂。在这种情况下，重写...

    javascript排序算法实现

    排序算法是计算机科学的基础，JavaScript中的排序算法实现可以帮助我们更高效地处理数组数据。本篇文章将详细探讨JavaScript中几种常见的排序算法及其实现。 1. **冒泡排序**： 冒泡排序是最基础的排序算法之一，...

    js排序组件

    "js排序组件"是一个专门用于前端数据排序的工具，它能够帮助开发者轻松地对表格、列表等元素中的数据进行升序、降序排列，提供用户友好的交互体验。下面将详细解释这个组件的核心知识点： 1. **JavaScript基础**：...

    Javascript表格排序大全

    3. **原生JavaScript排序**：你可以通过获取表格数据，对其进行排序，然后重新渲染表格。例如，使用`Array.prototype.sort()`函数对表格数据进行排序，再利用DOM操作更新表格内容。 4. **事件监听**：为了实现点击...

    javascript排序分页（转载）

    本篇文章将详细探讨如何使用JavaScript，结合jQuery库，来实现数据的分页显示以及表格内容的排序。 **一、排序** 在JavaScript中，数组的排序可以使用`Array.prototype.sort()`方法。这个方法接受一个比较函数作为...

Magicbox
Global site tag (gtag.js) - Google Analytics