欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery實(shí)現(xiàn)的table排序功能示例

 更新時(shí)間：2017年03月10日 11:59:35   作者：張佳美  
這篇文章主要介紹了jquery實(shí)現(xiàn)的table排序功能,涉及基于jQuery的頁面元素屬性動(dòng)態(tài)操作及鼠標(biāo)事件響應(yīng)相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)的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相對(duì)屏幕左右居中*/
      }
      table
      {
        border: solid 1px #666;
        border-collapse: collapse;
        width: 100%;
        cursor: default; /*該屬性定義了鼠標(biāo)指針放在一個(gè)元素邊界范圍內(nèi)時(shí)所用的光標(biāo)形狀,default默認(rèn)光標(biāo)（通常是一個(gè)箭頭）*/
      }
      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; /*光標(biāo)呈現(xiàn)為指示鏈接的指針（一只手）*/
      }
      .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對(duì)象
        var tbHead = tableObject.children('thead'); //獲取table對(duì)象下的thead
        var tbHeadTh = tbHead.find('tr th'); //獲取thead下的tr下的th
        var tbBody = tableObject.children('tbody'); //獲取table對(duì)象下的tbody
        var tbBodyTr = tbBody.find('tr'); //獲取tbody下的tr
        var sortIndex = -1;
        tbHeadTh.each(function () {//遍歷thead的tr下的th
          var thisIndex = tbHeadTh.index($(this)); //獲取th所在的列號(hào)
          //給表態(tài)th增加鼠標(biāo)位于上方時(shí)發(fā)生的事件
          $(this).mouseover(function () {
            tbBodyTr.each(function () {//編列tbody下的tr
              var tds = $(this).find("td"); //獲取列號(hào)為參數(shù)index的td對(duì)象集合
              $(tds[thisIndex]).addClass("hover");//給列號(hào)為參數(shù)index的td對(duì)象添加樣式
            });
          }).mouseout(function () {//給表頭th增加鼠標(biāo)離開時(shí)的事件
            tbBodyTr.each(function () {
              var tds = $(this).find("td");
              $(tds[thisIndex]).removeClass("hover");//鼠標(biāo)離開時(shí)移除td對(duì)象上的樣式
            });
          });
          $(this).click(function () {//給當(dāng)前表頭th增加點(diǎn)擊事件
            var dataType = $(this).attr("type");//點(diǎn)擊時(shí)獲取當(dāng)前th的type屬性值
            checkColumnValue(thisIndex, dataType);
          });
        });
        $("tbody tr").removeClass(); //先移除tbody下tr的所有css類
        //table中tbody中tr鼠標(biāo)位于上面時(shí)添加顏色,離開時(shí)移除顏色
        $("tbody tr").mouseover(function () {
          $(this).addClass("hover");
        }).mouseout(function () {
          $(this).removeClass("hover");
        });
        //對(duì)表格排序
        function checkColumnValue(index, type) {
          var trsValue = new Array();
          tbBodyTr.each(function () {
            var tds = $(this).find('td');
            //獲取行號(hào)為index列的某一行的單元格內(nèi)容與該單元格所在行的行內(nèi)容添加到數(shù)組trsValue中
            trsValue.push(type + ".separator" + $(tds[index]).html() + ".separator" + $(this).html());
            $(this).html("");
          });
          var len = trsValue.length;
          if (index == sortIndex) {
          //如果已經(jīng)排序了則直接倒序
            trsValue.reverse();
          } else {
            for (var i = 0; i < len; i++) {
              //split() 方法用于把一個(gè)字符串分割成字符串?dāng)?shù)組
              //獲取每行分割后數(shù)組的第一個(gè)值,即此列的數(shù)組類型,定義了字符串\數(shù)字\Ip
              type = trsValue[i].split(".separator")[0];
              for (var j = i + 1; j < len; j++) {
                //獲取每行分割后數(shù)組的第二個(gè)值,即文本值
                value1 = trsValue[i].split(".separator")[1];
                //獲取下一行分割后數(shù)組的第二個(gè)值,即文本值
                value2 = trsValue[j].split(".separator")[1];
                //接下來是數(shù)字\字符串等的比較
                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轉(zhuǎn)成整型
        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">
              序號(hào)
            </th>
            <th type="string">
              書名
            </th>
            <th type="number">
              價(jià)格（元）
            </th>
            <th type="string">
              出版時(shí)間
            </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>
              設(shè)計(jì)模式之禪
            </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>
              輕量級(jí) Java EE 企業(yè)應(yīng)用實(shí)戰(zhàn)
            </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 開發(fā)實(shí)戰(zhàn)經(jīng)典
            </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 開發(fā)實(shí)戰(zhàn)經(jīng)典
            </td>
            <td>
              69.80
            </td>
            <td>
              2011-11
            </td>
            <td>
              2500
            </td>
            <td>
              215.168.54.125
            </td>
          </tr>
        </tbody>
      </table>
    </div>
 </body>
</html>

運(yùn)行效果圖如下：

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果

    jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果

    這篇文章主要為大家詳細(xì)介紹了jquery模擬picker實(shí)現(xiàn)滑動(dòng)選擇效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果

    jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果

    開發(fā)一個(gè)jQuery插件實(shí)現(xiàn)多級(jí)聯(lián)動(dòng)菜單效果，實(shí)現(xiàn)步驟很詳細(xì)，感興趣的小伙伴們可以參考一下
    2015-12-12
  • 使用jquery自定義鼠標(biāo)樣式滿足個(gè)性需求

    使用jquery自定義鼠標(biāo)樣式滿足個(gè)性需求

    瀏覽器是有自帶的鼠標(biāo)樣式的，如果某些時(shí)候?yàn)榱吮３质髽?biāo)樣式的統(tǒng)一，或者想指定特定的鼠標(biāo)樣式該怎么辦呢？那就要使用自定義了，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下
    2013-11-11
  • 基于jquery的獲取mouse坐標(biāo)插件的實(shí)現(xiàn)代碼

    基于jquery的獲取mouse坐標(biāo)插件的實(shí)現(xiàn)代碼

    用jquery實(shí)現(xiàn)的獲取mouse坐標(biāo)的實(shí)現(xiàn)代碼，需要的朋友可以參考下。
    2010-04-04
  • jQuery實(shí)現(xiàn)div拖拽效果實(shí)例分析

    jQuery實(shí)現(xiàn)div拖拽效果實(shí)例分析

    這篇文章主要介紹了jQuery實(shí)現(xiàn)div拖拽效果的方法,結(jié)合實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件實(shí)現(xiàn)頁面元素樣式變換的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
    2016-02-02
  • 自動(dòng)適應(yīng)iframe右邊的高度

    自動(dòng)適應(yīng)iframe右邊的高度

    在開發(fā)項(xiàng)目過程中，用iframe嵌套，會(huì)發(fā)現(xiàn)一個(gè)問題，用iframe嵌套的html結(jié)構(gòu)右邊不會(huì)自動(dòng)適應(yīng)高度。如何解決這一問題呢，下面就跟小編一起來看下吧
    2016-12-12
  • jquery ajax提交表單數(shù)據(jù)的兩種方式

    jquery ajax提交表單數(shù)據(jù)的兩種方式

    貌似AJAX越來越火了，作為一個(gè)WEB程序開發(fā)者要是不會(huì)這個(gè)感覺就要落伍，甚至有可能在求職的時(shí)候?qū)冶惶蕴?。我也是一個(gè)WEB程序開發(fā)者，當(dāng)然我也要“隨波逐流”一把，不然飯碗不保??！
    2009-11-11
  • Jquery中擴(kuò)展方法extend使用技巧

    Jquery中擴(kuò)展方法extend使用技巧

    extend是常用的參數(shù)處理函數(shù)，特別是對(duì)默認(rèn)值的使用，但是在使用過程中，默認(rèn)值往往是不能被改變的,需要的朋友可以參考下
    2014-08-08
  • 一樣的table？不一樣的table(可編輯狀態(tài)table)

    一樣的table？不一樣的table(可編輯狀態(tài)table)

    今天要分享的table不僅僅能顯示數(shù)據(jù)，還可以對(duì)數(shù)據(jù)進(jìn)行編輯，當(dāng)鼠標(biāo)點(diǎn)擊數(shù)據(jù)時(shí)相應(yīng)的數(shù)據(jù)格就變成可編輯的狀態(tài)，廢話不多說，進(jìn)入今天的主題
    2012-09-09
  • 基于jquery實(shí)現(xiàn)最簡單的選項(xiàng)卡切換效果

    基于jquery實(shí)現(xiàn)最簡單的選項(xiàng)卡切換效果

    這篇文章主要介紹了基于jquery實(shí)現(xiàn)最簡單的選項(xiàng)卡切換效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
    2016-05-05

最新評(píng)論