如题

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
         .tbl-list, .tbl-list td, .tbl-list th {
             border: solid 1px #000;
             border-collapse: collapse;
             padding: 10px;
             margin: 15px;
         }
     </style>
     <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
     <title>table sort</title>
     <script type="text/javascript">
         //排序 tableId: 表的id,iCol:第几列 ;dataType:iCol对应的列显示数据的数据类型
         function sortAble(th, tableId, iCol, dataType) {

             var ascChar = "▲";
             var descChar = "▼";

             var table = document.getElementById(tableId);

             //排序标题加背景色
             for (var t = 0; t < table.tHead.rows[0].cells.length; t++) {
                 var th = $(table.tHead.rows[0].cells[t]);
                 var thText = th.html().replace(ascChar, "").replace(descChar, "");
                 if (t == iCol) {
                     th.css("background-color", "#ccc");
                 }
                 else {
                     th.css("background-color", "#fff");
                     th.html(thText);
                 }

             }

             var tbody = table.tBodies[0];
             var colRows = tbody.rows;
             var aTrs = new Array;

             //将得到的行放入数组,备用
             for (var i = 0; i < colRows.length; i++) {
                 //注:如果要求“分组明细不参与排序”,把下面的注释去掉即可
                 //if ($(colRows[i]).attr("group") != undefined) {
                     aTrs.push(colRows[i]);
                 //}
             }

             //判断上一次排列的列和现在需要排列的是否同一个。
             var thCol = $(table.tHead.rows[0].cells[iCol]);
             if (table.sortCol == iCol) {
                 aTrs.reverse();
             } else {
                 //如果不是同一列,使用数组的sort方法,传进排序函数
                 aTrs.sort(compareEle(iCol, dataType));
             }

             var oFragment = document.createDocumentFragment();
             for (var i = 0; i < aTrs.length; i++) {
                 oFragment.appendChild(aTrs[i]);
             }
             tbody.appendChild(oFragment);

             //记录最后一次排序的列索引
             table.sortCol = iCol;

             //给排序标题加“升序、降序” 小图标显示
             var th = $(table.tHead.rows[0].cells[iCol]);
             if (th.html().indexOf(ascChar) == -1 && th.html().indexOf(descChar) == -1) {
                 th.html(th.html() + ascChar);
             }
             else if (th.html().indexOf(ascChar) != -1) {
                 th.html(th.html().replace(ascChar, descChar));
             }
             else if (th.html().indexOf(descChar) != -1) {
                 th.html(th.html().replace(descChar, ascChar));
             }

             //重新整理分组
             var subRows = $("#" + tableId + " tr[parent]");
             for (var t = subRows.length - 1; t >= 0 ; t--) {
                 var parent = $("#" + tableId + " tr[group='" + $(subRows[t]).attr("parent") + "']");
                 parent.after($(subRows[t]));
             }
         }

         //将列的类型转化成相应的可以排列的数据类型
        function convert(sValue, dataType) {
             switch (dataType) {
                 case "int":
                     return parseInt(sValue, 10);
                 case "float":
                     return parseFloat(sValue);
                 case "date":
                     return new Date(Date.parse(sValue));
                 case "string":
                 default:
                     return sValue.toString();
             }
         }

         //排序函数,iCol表示列索引,dataType表示该列的数据类型
         function compareEle(iCol, dataType) {
             return function (oTR1, oTR2) {

                 var vValue1 = convert(removeHtmlTag($(oTR1.cells[iCol]).html()), dataType);
                 var vValue2 = convert(removeHtmlTag($(oTR2.cells[iCol]).html()), dataType);
                 if (vValue1 < vValue2) {
                     return -1;
                 }
                 else {
                     return 1;
                 }

             };
         }

         //去掉html标签
         function removeHtmlTag(html) {
             return html.replace(/<[^>]+>/g, "");
         }

         //jQuery加载完以后,分组行高亮背景,分组明细隐藏
         $(document).ready(function () {
             $("tr[group]").css("background-color", "#ff9");
             $("tr[parent]").hide();
         });

         //点击分组行时,切换分组明细的显示/隐藏
        function showSub(a) {
             var groupValue = $(a).parent().parent().attr("group");
             var subDetails = $("tr[parent='" + groupValue + "']");
             subDetails.toggle();
         }

     </script>
 </head>

 <body>

     <table id="tableId" class="tbl-list" cellpadding="0" cellspacing="0" style="table-layout:fixed;">
         <thead>
             <tr>
                 <th>序号</th>
                 <th width="100px" onclick="sortAble(this,'tableId', 1,'string')"
                     style="cursor:pointer">姓名</th>
                 <th width="200px" onclick="sortAble(this,'tableId', 2, 'date')"
                     style="cursor:pointer">生日</th>
                 <th width="100px" onclick="sortAble(this,'tableId', 3, 'int')"
                     style="cursor:pointer">年龄</th>
                 <th width="100px" onclick="sortAble(this,'tableId', 4, 'float')"
                     style="cursor:pointer">工资</th>
             </tr>
         </thead>
         <tbody>
             <tr group="A">
                 <td>1</td>
                 <td><a href="#" onclick="showSub(this)">Group-A</a></td>
                 <td>01/12/1982</td>
                 <td>25</td>
                 <td>1000.50</td>
             </tr>
             <tr parent="A">
                 <td>2</td>
                 <td>A-01</td>
                 <td>01/09/1982</td>
                 <td>25</td>
                 <td>2000.10</td>
            </tr>
             <tr parent="A">
                 <td>3</td>
                 <td>A-02</td>
                 <td>01/10/1982</td>
                 <td>26</td>
                 <td>2000.20</td>
             </tr>
             <tr group="B">
                 <td>4</td>
                 <td><a href="#" onclick="showSub(this)">Group-B</a></td>
                 <td>10/14/1999</td>
                 <td>18</td>
                 <td>1000.20</td>
             </tr>
             <tr parent="B">
                 <td>5</td>
                 <td>B-01</td>
                 <td>02/12/1982</td>
                 <td>19</td>
                 <td>3000.20</td>
             </tr>
             <tr parent="B">
                 <td>6</td>
                 <td>B-02</td>
                 <td>03/12/1982</td>
                 <td>20</td>
                 <td>3000.30</td>
             </tr>
             <tr group="C">
                 <td>7</td>
                 <td><a href="#" onclick="showSub(this)">Group-C</a></td>
                 <td>10/14/1980</td>
                 <td>8</td>
                 <td>1000.30</td>
             </tr>
             <tr parent="C">
                 <td>8</td>
                 <td>C-01</td>
                 <td>03/12/1981</td>
                 <td>17</td>
                 <td>3100.30</td>
             </tr>
         </tbody>
     </table>
 </body>
 </html>

js实现td排序及分组分类的更多相关文章

  1. 案例学习总结:原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

  2. MySql下实现先排序后分组

    最近在工作中遇到一个先排序后分组的需求,发现MySql不同的版本有不同的结果,特此记录. 举例:要求在shop表中查询出各类型商店中价格最高的商品. --表结构-- create table `sho ...

  3. mysql 怎样先排序再分组

    权游游牧族:众所周知!一句SqL语句不能先排序再分组.所以这里给出几个案例 --表结构-- create table `shop` ( `id` int (10) PRIMARY KEY, `shop ...

  4. Hadoop学习笔记—11.MapReduce中的排序和分组

    一.写在之前的 1.1 回顾Map阶段四大步骤 首先,我们回顾一下在MapReduce中,排序和分组在哪里被执行: 从上图中可以清楚地看出,在Step1.4也就是第四步中,需要对不同分区中的数据进行排 ...

  5. JS中对象排序

    详细代码如下: var s=[{name:"abc",value:10},{name:"dbc",value:5},{name:"acc", ...

  6. js函数文件排序化

    因为本人的某些小强迫症,写了一个格式化并根据js函数名排序的c++程序,此作mark #include <stdio.h> #include <map> #include &l ...

  7. LINQ简明教程:数据排序、分组、过滤

    LINQ可以对很多数据源进行查询操作,比如数据库.数组(array).链表(list).XML文件等.在本文中,我将从数组中提取数据,这些数据是10个最受欢迎的国家.有一个类叫Countries,有c ...

  8. MySQL的外键,修改表,基本数据类型,表级别操作,其他(条件,通配符,分页,排序,分组,联合,连表操作)

    MySQL的外键,修改表,基本数据类型,表级别操作,其他(条件,通配符,分页,排序,分组,联合,连表操作): a.创建2张表 create table userinfo(nid int not nul ...

  9. LINQ之路14:LINQ Operators之排序和分组(Ordering and Grouping)

    本篇继续LINQ Operators的介绍,这里要讨论的是LINQ中的排序和分组功能.LINQ的排序操作符有:OrderBy, OrderByDescending, ThenBy, 和ThenByDe ...

随机推荐

  1. Spring与Mybatis整合的MapperScannerConfigurer处理过程源码分析

    前言 本文将分析mybatis与spring整合的MapperScannerConfigurer的底层原理,之前已经分析过java中实现动态,可以使用jdk自带api和cglib第三方库生成动态代理. ...

  2. SlimDX.dll安装之后所在位置

    C:\Windows\Microsoft.NET\assembly\GAC_64\SlimDX\v4.0_4.0.13.43__b1b0c32fd1ffe4f9\SlimDX.dll

  3. ASP.NET Web API 全局权限和全局异常处理

    在开发中,我使用json格式序列化,所以将默认的xml序列化移除 public static class WebApiConfig { public static void Register(Http ...

  4. 技术英文单词贴--B

    B breadcrumb 面包屑 bubble 冒泡

  5. 20135335郝爽 &amp; 20135304刘世鹏 实验一

    北京电子科技学院(BESTI) 实     验    报     告 课程: 密码系统设计基础                                                      ...

  6. ExpandableListView方法详解

    正文 一.结构public interface ExpandableListAdapter 间接子类:BaseExpandableListAdapter,CursorTreeAdapter,Resou ...

  7. python StringIO标准库基础学习

    #标准库:StringIO提供类文件API文本缓冲区#作用:可以处理内存中的文本,有2种不同的实现:cStringIP版本用c编写提高速度,StringIO用python来提供可移植性,与其他字符串连 ...

  8. MyReport演示下载连接和相关文章索引

    演示地址 Flex集成方式 (旧版2.6) HTML集成方式 MyReport产品站点 NEW 相关文章 ------------------------2.6下面版本号--------------- ...

  9. centOS7安装nodejs(8.4.0)(详细步骤)

    1.使用rpm查看是否安装gcc.make 若如下图有输出版本详细表示已安装,则无需再次安装,直接下一步(输入rpm -qa 包名称) 若没有安装则执行以下命令安装:  yum install gcc ...

  10. 关于如何在mac系统上安装Git并在码市上建立项目

    对Git一窍不通,为了在mac系统上安装Git,查了很多资料,走了很多弯路,一切搞定后发现其实很简单. 1.在https://brew.sh上按要求安装Homebrew. 2.在电脑终端键入brew ...