• <fieldset id="8imwq"><menu id="8imwq"></menu></fieldset>
  • <bdo id="8imwq"><input id="8imwq"></input></bdo>
    最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
    問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
    當前位置: 首頁 - 科技 - 知識百科 - 正文

    JS實現表格排序&lt;thead&gt;的不同字段的方法

    來源:懂視網 責編:小采 時間:2020-11-27 20:12:21
    文檔

    JS實現表格排序<thead>的不同字段的方法

    JS實現表格排序<thead>的不同字段的方法:<table id="tableSort"> <thead> <tr> <th data-type="num">工號</th> <th data-type="string">姓名</th> <th data-
    推薦度:
    導讀JS實現表格排序<thead>的不同字段的方法:<table id="tableSort"> <thead> <tr> <th data-type="num">工號</th> <th data-type="string">姓名</th> <th data-

    <table id="tableSort">
     <thead>
     <tr>
     <th data-type="num">工號</th>
     <th data-type="string">姓名</th>
     <th data-type="string">性別</th>
     <th data-type="date">時間</th>
     </tr>
     </thead>
     <tbody>
     <tr>
     <td>06</td>
     <td>sssss</td>
     <td>男</td>
     <td>2008-10-10</td>
     </tr>
     <tr>
     <td>07</td>
     <td>ddddd</td>
     <td>男</td>
     <td>2009-10-10</td>
     </tr>
     <tr>
     <td>11</td>
     <td>qqqqq</td>
     <td>男</td>
     <td>2010-10-10</td>
     </tr>
     <tr>
     <td>02</td>
     <td>vvvvv</td>
     <td>男</td>
     <td>2011-10-10</td>
     </tr>
     <tr>
     <td>11</td>
     <td>hhhhh</td>
     <td>男</td>
     <td>2011-12-10</td>
     </tr>
     <tr>
     <td>01</td>
     <td>eeeee</td>
     <td>女</td>
     <td>2015-10-10</td>
     </tr>
     <tr>
     <td>09</td>
     <td>mmmmm</td>
     <td>女</td>
     <td>2015-11-10</td>
     </tr>
     </tbody></table>
    <script> 
     var th = document.querySelector("#tableSort").tHead.rows[0].cells;
     var tbody = document.querySelector("#tableSort").tBodies[0];
     var td = tbody.rows;
     for(var i=0;
     i<th.length;
     i++) {
     th[i].flag = 1;
     th[i].onclick = function () {
     sort(this.getAttribute("data-type"),this.cellIndex,this.flag);
     this.flag = -this.flag;
    }
    } function sort(str,index,flag) {
     var arr = [];
     for(var i=0;
     i<td.length;
     i++) {
     arr.push(td[i]);
    }
    ;
     //排序開始 arr.sort(function(a,b) {
     return method(str, a.cells[index].innerHTML, b.cells[index].innerHTML)*flag;
    }
    );
     //添加到table for(var i=0;
     i<arr.length;
     i++) {
     tbody.appendChild(arr[i]) }
    } //排序方法 function method(str,a,b) {
     switch(str) {
     case 'num': return a-b;
     break;
     case 'string': return a.localeCompare(b);
     break;
     case "date": //日期排序,IE8下'2012-12-12'這種格式無法設置時間,替換成'/' return new Date(a.split("-").join("/")).getTime() - new Date(b.split("-").join("/")).getTime();
    }
    }
    </script>
    對于sort()排序方法。里面可以自定義小編覺得還是挺靈活的 arr.sort((a,b) => a-b) 針對number類型,
    arr.sort((a,b) => a.localeCompare(b))這波能反殺,針對string類型作比較 可返回(1,0,-1)三個選項,
    1,0,-1的先后順序,由于小編記憶力極差,剛看就忘了,請大家自行百度

    聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

    文檔

    JS實現表格排序<thead>的不同字段的方法

    JS實現表格排序<thead>的不同字段的方法:<table id="tableSort"> <thead> <tr> <th data-type="num">工號</th> <th data-type="string">姓名</th> <th data-
    推薦度:
    標簽: 表格 實現 js
    • 熱門焦點

    最新推薦

    猜你喜歡

    熱門推薦

    專題
    Top
    主站蜘蛛池模板: 欧美国产成人精品一区二区三区 | 亚洲国产主播精品极品网红 | 中文字幕精品无码一区二区| 国产欧美国产精品第一区| 日韩精品无码免费视频| 亚洲国产精品国自产拍电影| 精品欧洲AV无码一区二区男男| 久久国产精品免费| 99国产精品国产免费观看| 99久久99这里只有免费费精品| 亚洲一区二区精品视频| 国产午夜精品理论片久久| 久久精品国产影库免费看| 国内精品久久久久伊人av| 亚洲国产精品18久久久久久| 欧美ppypp精品一区二区| 国产精品午夜久久| 国产成人精品综合在线观看| 欧美日韩精品一区二区| 国产精品久久免费| 国产国产精品人在线视| 久久久久亚洲精品无码蜜桃| 亚洲一级Av无码毛片久久精品| 日韩福利视频精品专区| 精品亚洲成α人无码成α在线观看| 国产精品99爱免费视频| 中文字幕亚洲综合精品一区| 国产精品v欧美精品v日韩精品| 久久精品国产久精国产思思| 亚洲精品无码久久久久| 一本大道无码日韩精品影视| 四虎国产精品永久地址入口| 久久久久人妻精品一区三寸蜜桃| 国产成人亚洲精品影院| 国产L精品国产亚洲区久久| 91精品国产综合久久香蕉| 五月花精品视频在线观看| 欧美精品人爱c欧美精品| 四虎精品影院4hutv四虎| 99久久夜色精品国产网站| 国产成人精品综合久久久|