欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS表格排序操作实现代码

程序员文章站 2022-04-10 13:27:39
...
本文主要介绍了JS实现简单表格排序操作,结合具体实例形式分析了JavaScript事件响应及table表格动态操作相关技巧,需要的朋友可以参考下,希望能帮助到大家。


<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html" charset="utf-8">
  <title>sort table</title>
  <style>
    *{
      margin:0px;
      padding:0px;
    }
    body{
      background:#ccc;
    }
    table{
      width:350px;
      margin:0 auto;
      background-color:#eee;
    }
    table th{
      cursor:hand;
      padding:5px 0;
      background-color:#999;
    }
    table td{
      background-color:#fff;
      font-size:16px;
      font-weight:normal;
      text-align:center;
      line-height:30px;
    }
  </style>
  <script language="javascript">
    function sortCells(type){
      var tbs=document.getElementsByTagName("table")[0];
      var arr=[];
      var arr2=[];
      for(var i=1;i<tbs.rows.length;i++){
        var text=tbs.rows[i].cells[type].innerText;
        arr.push(text);
        arr2[text]=i;
      }
      if(type==0){
        arr.sort(function(a,b){return a-b});
      }else{
        arr.sort();
      }
      var temp="";
      for(var j=1;j<tbs.rows.length;j++){
        temp=tbs.rows[j].cells[0].innerText;
        tbs.rows[j].cells[0].innerText=tbs.rows[arr2[arr[j-1]]].cells[0].innerText;
        tbs.rows[arr2[arr[j-1]]].cells[0].innerText=temp;
        temp=tbs.rows[j].cells[1].innerText;
        tbs.rows[j].cells[1].innerText=tbs.rows[arr2[arr[j-1]]].cells[1].innerText;
        tbs.rows[arr2[arr[j-1]]].cells[1].innerText=temp;
        temp=tbs.rows[j].cells[2].innerText;
        tbs.rows[j].cells[2].innerText=tbs.rows[arr2[arr[j-1]]].cells[2].innerText;
        tbs.rows[arr2[arr[j-1]]].cells[2].innerText=temp;
//        console.log(arr2);
        for(var i=1;i<tbs.rows.length;i++){
          var text=tbs.rows[i].cells[type].innerText;
          arr2[text]=i;
        }
      }
    }
  </script>
</head>
<body>
<center>sort table</center>
<table border="0">
  <tr>
    <th onclick="sortCells(0);">序号</th>
    <th onclick="sortCells(1);">姓名</th>
    <th onclick="sortCells(2);">日期</th>
  </tr>
  <tr>
    <td>2</td>
    <td>BB</td>
    <td>2015-09-12</td>
  </tr>
   <tr>
    <td>3</td>
    <td>CC</td>
    <td>2015-07-12</td>
  </tr>
   <tr>
    <td>1</td>
    <td>AA</td>
    <td>2015-09-11</td>
  </tr>
   <tr>
    <td>4</td>
    <td>DD</td>
    <td>2015-06-12</td>
  </tr>
</table>
</body>
</html>

运行效果:

JS表格排序操作实现代码

JS表格排序操作实现代码

相关推荐:

jQuery简单实现对数组去重及排序操作详解

javascript实现对表格元素进行排序操作_javascript技巧

jQuery利用sort对DOM元素进行排序操作

以上就是JS表格排序操作实现代码的详细内容,更多请关注其它相关文章!