使用javascript进行表格排序

最新推荐文章于 2022-04-01 19:31:27 发布

java_min

最新推荐文章于 2022-04-01 19:31:27 发布

阅读量112

点赞数

分类专栏： It 文章标签： javascript function

本文链接：https://blog.csdn.net/java_min/article/details/6646443

版权

It 专栏收录该内容

190 篇文章 0 订阅

订阅专栏

<body>
  <table id="t1">
   <thead>
    <tr>
     <th οnclick="sortTable('t1',0);" style="cursor:pointer;">User ID</th>
     <th οnclick="sortTable('t1',1)" style="cursor:pointer;">userName</th>
    </tr>
   </thead>
    <tbody>
     <tr>
      <td>123</td><td>simier</td>
     </tr>
     <tr>
      <td>43</td><td>java_min</td>
     </tr>
     <tr>
      <td>432</td><td>hello</td>
     </tr>
     <tr>
      <td>112</td><td>ajax</td>
     </tr>
    </tbody>
  </table>

  <script type="text/javascript">
   function generateCompareTRs(iCol){
    return function compareTRs(tr1,tr2){
     var v1 = tr1.cells.item(iCol).firstChild.nodeValue;
     var v2 = tr2.cells.item(iCol).firstChild.nodeValue;
     var a = parseInt(v1);
     var b = parseInt(v2);
     if(!isNaN(a) && !isNaN(b)){
      return a -b;
     }else{
      return v1.localeCompare(v2);
     }
    };
   }

   function sortTable(tableId,icol){
    var tab = document.getElementById(tableId);
    var tbod = tab.tBodies.item(0);
    var orows = tbod.rows;
    var arr = new Array();
    for(var i=0;i<orows.length;i++){
     arr.push(orows.item(i));
    }

    arr.sort(generateCompareTRs(icol));

    var frag = document.createDocumentFragment();
    for(var i=0;i<arr.length;i++){
     frag.appendChild(arr[i]);
    }

    tbod.appendChild(frag);
   }
  </script>
</body>