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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
java必学必会之static关键字
Dec 03 Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
基于IView中on-change属性的使用详解
Mar 15 Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 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
php格式化日期实例分析
2014/11/12 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
编写PHP脚本过滤用户上传的图片
2015/07/03 PHP
php多线程并发实现方法
2016/09/30 PHP
thinkphp框架实现路由重定义简化url访问地址的方法分析
2020/04/04 PHP
一个高效的JavaScript压缩工具下载集合
2007/03/06 Javascript
防止浏览器记住用户名及密码的简单实用方法
2013/04/22 Javascript
javascript中typeof的使用示例
2013/12/19 Javascript
node.js中的buffer.copy方法使用说明
2014/12/14 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
js仿微信语音播放实现思路
2016/12/12 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
nuxt框架中对vuex进行模块化设置的实现方法
2019/09/06 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
python中zip和unzip数据的方法
2015/05/27 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python的变量与赋值详细分析
2017/11/08 Python
Python标准库shutil用法实例详解
2018/08/13 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
基于python实现学生信息管理系统
2019/11/22 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
2016/11/15 HTML / CSS
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
送货司机岗位职责
2013/12/11 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
应届大专生自荐书
2014/06/16 职场文书
医生学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
环保建议书范文
2015/09/14 职场文书