jquery实现的table排序功能示例

程序员文章站 2022-09-30 08:18:05

本文实例讲述了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相关内容感兴趣的读者可查看本站专题：《jquery表格(table)操作技巧汇总》、《jquery切换特效与技巧总结》、《jquery扩展技巧总结》、《jquery常用插件及用法总结》、《jquery常见经典特效汇总》及《jquery选择器用法总结》

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

上一篇： Zac做客林夕阁回答SEO相关问题

下一篇： BootStrap表单宽度设置方法

jquery实现的table排序功能示例

用CSS3实现无限循环的无缝滚动的示例代码

NodeJS 实现多语言的示例代码

JavaScript实现的冒泡排序法及统计相邻数交换次数示例

asp.net+xml+flash实现的图片展示效果示例

iOS App中实现播放音效和音乐功能的简单示例

jQuery使用正则验证15/18身份证的方法示例

JS/jquery实现一个网页内同时调用多个倒计时的方法

jQuery实现合并表格单元格中相同行操作示例

jQuery EasyUI tree增加搜索功能的实现方法

jQuery实现的网站banner图片无缝轮播效果完整实例