jquery实现的table排序功能示例


Posted in Javascript onMarch 10, 2017

本文实例讲述了jquery实现的table排序功能。分享给大家供大家参考,具体如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
</head>
  <style type="text/css">
      div
      {
        width: 1024px;
        margin: 0 auto; /*div相对屏幕左右居中*/
      }
      table
      {
        border: solid 1px #666;
        border-collapse: collapse;
        width: 100%;
        cursor: default; /*该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状,default默认光标(通常是一个箭头)*/
      }
      tr
      {
        border: solid 1px #666;
        height: 30px;
      }
      table thead tr
      {
        background-color: #ccc;
      }
      td
      {
        border: solid 1px #666;
      }
      th
      {
        border: solid 1px #666;
        text-align: center;
        cursor: pointer; /*光标呈现为指示链接的指针(一只手)*/
      }
      .sequence
      {
        text-align: center;
      }
      .hover
      {
        background-color: #3399FF;
      }
    </style>
<SCRIPT type="text/javascript" src="jquery-1.7.2.min.js">
</script>
<script type="text/javascript">
      $(function () {
        var tableObject = $('#tableSort'); //获取id为tableSort的table对象
        var tbHead = tableObject.children('thead'); //获取table对象下的thead
        var tbHeadTh = tbHead.find('tr th'); //获取thead下的tr下的th
        var tbBody = tableObject.children('tbody'); //获取table对象下的tbody
        var tbBodyTr = tbBody.find('tr'); //获取tbody下的tr
        var sortIndex = -1;
        tbHeadTh.each(function () {//遍历thead的tr下的th
          var thisIndex = tbHeadTh.index($(this)); //获取th所在的列号
          //给表态th增加鼠标位于上方时发生的事件
          $(this).mouseover(function () {
            tbBodyTr.each(function () {//编列tbody下的tr
              var tds = $(this).find("td"); //获取列号为参数index的td对象集合
              $(tds[thisIndex]).addClass("hover");//给列号为参数index的td对象添加样式
            });
          }).mouseout(function () {//给表头th增加鼠标离开时的事件
            tbBodyTr.each(function () {
              var tds = $(this).find("td");
              $(tds[thisIndex]).removeClass("hover");//鼠标离开时移除td对象上的样式
            });
          });
          $(this).click(function () {//给当前表头th增加点击事件
            var dataType = $(this).attr("type");//点击时获取当前th的type属性值
            checkColumnValue(thisIndex, dataType);
          });
        });
        $("tbody tr").removeClass(); //先移除tbody下tr的所有css类
        //table中tbody中tr鼠标位于上面时添加颜色,离开时移除颜色
        $("tbody tr").mouseover(function () {
          $(this).addClass("hover");
        }).mouseout(function () {
          $(this).removeClass("hover");
        });
        //对表格排序
        function checkColumnValue(index, type) {
          var trsValue = new Array();
          tbBodyTr.each(function () {
            var tds = $(this).find('td');
            //获取行号为index列的某一行的单元格内容与该单元格所在行的行内容添加到数组trsValue中
            trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
            $(this).html("");
          });
          var len = trsValue.length;
          if (index == sortIndex) {
          //如果已经排序了则直接倒序
            trsValue.reverse();
          } else {
            for (var i = 0; i < len; i++) {
              //split() 方法用于把一个字符串分割成字符串数组
              //获取每行分割后数组的第一个值,即此列的数组类型,定义了字符串\数字\Ip
              type = trsValue[i].split(".separator")[0];
              for (var j = i + 1; j < len; j++) {
                //获取每行分割后数组的第二个值,即文本值
                value1 = trsValue[i].split(".separator")[1];
                //获取下一行分割后数组的第二个值,即文本值
                value2 = trsValue[j].split(".separator")[1];
                //接下来是数字\字符串等的比较
                if (type == "number") {
                  value1 = value1 == "" ? 0 : value1;
                  value2 = value2 == "" ? 0 : value2;
                  if (parseFloat(value1) > parseFloat(value2)) {
                    var temp = trsValue[j];
                    trsValue[j] = trsValue[i];
                    trsValue[i] = temp;
                  }
                } else if (type == "ip") {
                  if (ip2int(value1) > ip2int(value2)) {
                    var temp = trsValue[j];
                    trsValue[j] = trsValue[i];
                    trsValue[i] = temp;
                  }
                } else {
                  if (value1.localeCompare(value2) > 0) {//该方法不兼容谷歌浏览器
                    var temp = trsValue[j];
                    trsValue[j] = trsValue[i];
                    trsValue[i] = temp;
                  }
                }
              }
            }
          }
          for (var i = 0; i < len; i++) {
            $("tbody tr:eq(" + i + ")").html(trsValue[i].split(".separator")[2]);
          }
          sortIndex = index;
        }
        //IP转成整型
        function ip2int(ip) {
          var num = 0;
          ip = ip.split(".");
          num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]);
          return num;
        }
      })
    </script>
<BODY>
  <div>
      <table id="tableSort">
        <thead>
          <tr>
            <th type="number">
              序号
            </th>
            <th type="string">
              书名
            </th>
            <th type="number">
              价格(元)
            </th>
            <th type="string">
              出版时间
            </th>
            <th type="number">
              印刷量(册)
            </th>
            <th type="ip">
              IP
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="hover">
            <td class="sequence">
              1
            </td>
            <td>
              狼图腾
            </td>
            <td>
              29.80
            </td>
            <td>
              2009-10
            </td>
            <td>
              50000
            </td>
            <td>
              192.168.1.125
            </td>
          </tr>
          <tr>
            <td class="sequence">
              2
            </td>
            <td>
              孝心不能等待
            </td>
            <td>
              29.80
            </td>
            <td>
              2009-09
            </td>
            <td>
              800
            </td>
            <td>
              192.68.1.125
            </td>
          </tr>
          <tr>
            <td class="sequence">
              3
            </td>
            <td>
              藏地密码2
            </td>
            <td>
              28.00
            </td>
            <td>
              2008-10
            </td>
            <td>
            </td>
            <td>
              192.102.0.12
            </td>
          </tr>
          <tr>
            <td class="sequence">
              4
            </td>
            <td>
              藏地密码1
            </td>
            <td>
              24.80
            </td>
            <td>
              2008-10
            </td>
            <td>
            </td>
            <td>
              215.34.126.10
            </td>
          </tr>
          <tr>
            <td class="sequence">
              5
            </td>
            <td>
              设计模式之禅
            </td>
            <td>
              69.00
            </td>
            <td>
              2011-12
            </td>
            <td>
            </td>
            <td>
              192.168.1.5
            </td>
          </tr>
          <tr>
            <td class="sequence">
              6
            </td>
            <td>
              轻量级 Java EE 企业应用实战
            </td>
            <td>
              99.00
            </td>
            <td>
              2012-04
            </td>
            <td>
              5000
            </td>
            <td>
              192.358.1.125
            </td>
          </tr>
          <tr>
            <td class="sequence">
              7
            </td>
            <td>
              Java 开发实战经典
            </td>
            <td>
              79.80
            </td>
            <td>
              2012-01
            </td>
            <td>
              2000
            </td>
            <td>
              192.168.1.25
            </td>
          </tr>
          <tr>
            <td class="sequence" onclick="sortArray()">
              8
            </td>
            <td>
              Java Web 开发实战经典
            </td>
            <td>
              69.80
            </td>
            <td>
              2011-11
            </td>
            <td>
              2500
            </td>
            <td>
              215.168.54.125
            </td>
          </tr>
        </tbody>
      </table>
    </div>
 </body>
</html>

运行效果图如下:

jquery实现的table排序功能示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
JS 实现导航栏悬停效果
Sep 23 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
Nov 18 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
javascript实现模拟时钟的方法
May 13 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
JavaScript设计模式之代理模式详解
Jun 09 Javascript
微信小程序日期时间选择器使用方法
Feb 01 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
微信小程序 向左滑动删除功能的实现
Mar 10 #Javascript
常用的js方法合集
Mar 10 #Javascript
利用Angular+Angular-Ui实现分页(代码加简单)
Mar 10 #Javascript
JS中利用localStorage防止页面动态添加数据刷新后数据丢失
Mar 10 #Javascript
C#微信小程序服务端获取用户解密信息实例代码
Mar 10 #Javascript
js实现产品缩略图效果
Mar 10 #Javascript
BootStrap注意事项小结(五)表单
Mar 10 #Javascript
You might like
屏蔽浏览器缓存另类方法
2006/10/09 PHP
PHP foreach循环使用详解与实例代码
2010/05/08 PHP
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
PHP开发中四种查询返回结果分析
2011/01/02 PHP
探讨file_get_contents与curl效率及稳定性的分析
2013/06/06 PHP
PHP静态文件生成类实例
2014/11/29 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
IE6图片加载的一个BUG解决方法
2010/07/13 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
javascript 动态创建表格
2015/01/08 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
Vue.js实现微信过渡动画左右切换效果
2017/06/13 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
2019/03/14 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
2020/10/31 Javascript
Python 连连看连接算法
2008/11/22 Python
Python 稀疏矩阵-sparse 存储和转换
2017/05/27 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python flask解析json数据不完整的解决方法
2019/05/26 Python
X/HTML5 和 XHTML2
2008/10/17 HTML / CSS
amazeui页面分析之登录页面的示例代码
2020/08/25 HTML / CSS
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
初中生自我鉴定
2014/02/04 职场文书
家长对老师的评语
2014/04/18 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
Java基础之this关键字的使用
2021/06/30 Java/Android