我們經常要對表格數據進行升降排序，以便更方便的查看數據。不少方法都可以實現這一功能，不過今天介紹的這個方法，是用JS實現的，代碼少，速度快，不用第三方插件，值得推薦使用。

demodownload

實例介紹

這個表格是記錄學生的一些信息，包括姓名、年齡、性別，但表格數據排序凌亂無序。現在我們要按照年齡查看學生信息，因此需要對表格進行重新排序。

這就是我們將要用JS做的工作，當點擊表頭的“年齡”時，會對表格進行按“年齡”升降排序。

實例代碼

CSS

<style>
  body {
    margin-top: 30px;
  }
  table {
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  
  table td,
  table th {
    border: 1px solid #cad9ea;
    color: #666;
    height: 30px;
  }
  
  table thead th {
    background-color: #CCE8EB;
    width: 100px;
  }
  
  table tr:nth-child(odd) {
    background: #fff;
  }
  
  table tr:nth-child(even) {
    background: #F5FAFA;
  }
  
  thead tr th {
    cursor: pointer;
  }
  
  thead tr th:hover {
    text-decoration: underline;
  }
</style>

CSS只是對表格的樣式設置，與程序的實現無關。

HTML

<table>
    <thead>
      <tr>
        <th>姓名</th>
        <th>性別</th>
        <th id="score">年齡</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>張麗麗</td>
        <td>女</td>
        <td>16</td>
      </tr>
      <tr>
        <td>陳明</td>
        <td>男</td>
        <td>18</td>
      </tr>
      <tr>
        <td>歐陽珊珊</td>
        <td>女</td>
        <td>15</td>
      </tr>
      <tr>
        <td>李小剛</td>
        <td>男</td>
        <td>20</td>
      </tr>
    </tbody>
</table>

這里僅提供要操作的Table表格代碼。要注意的是表格內容的tr標簽外有個<tbody>標簽，這個不能少，因為JS編程代碼需要尋找這個標簽。

JS

<script>
  var score = document.getElementById('score');
  var tbody = document.getElementsByTagName('tbody')[0]; //獲取文檔下的第一個tbdoy
  var tr = tbody.getElementsByTagName('tr'); //獲取tbody下的tr（數組）
  var arr = [];
  var isAsc = true; //判斷當前排序是否是正序
  score.onclick = function() {
    if(!isAsc) { //如果是反序，則進行一下操作 
      for(var i = 0; i < tr.length; i++) {
        arr.push(tr[i]); //把tr數組復制到arr數組
      }
      arr.sort(function(tr1, tr2) { //數組排序arr.sort()
        var value1 = tr1.getElementsByTagName('td')[2].innerHTML;
        var value2 = tr2.getElementsByTagName('td')[2].innerHTML;
        return value2.localeCompare(value1); //localeCompare() 方法提供的是比較字符串的方法，如果value2>value1,則返回1；如果value2<value1,則返回-1;相等則0
      });
      Oinsert(); //進行文檔添加操作
      isAsc = true; //點擊之后反轉一下順序
    } else { //如果是正序，則進行一下操作
      for(var i = 0; i < tr.length; i++) {
        arr.push(tr[i]);
      }
      arr.sort(function(tr1, tr2) {
        var value1 = tr1.getElementsByTagName('td')[2].innerHTML;
        var value2 = tr2.getElementsByTagName('td')[2].innerHTML;
        return value1.localeCompare(value2);
      });
      Oinsert();
      isAsc = false;
    }
  }

  function Oinsert() { //向文檔添加已排好序的節點
    var fragment = document.createDocumentFragment(); //當你想提取文檔的一部分，改變，增加，或刪除某些內容及插入到文檔末尾可以使用createDocumentFragment() 方法
    for(var j = 0; j < arr.length; j++) {
      fragment.appendChild(arr[j]); //把數組中的元素添加到節點的子節點列表的末尾
    }
    tbody.appendChild(fragment); //把fragment添加到tbody
  }
</script>

編程思想

先把所有tr存入一個數組，然后按照tr里“年齡”（td）的數值對數組（tr）進行排序，最后把數組（tr）重新寫入<tbody></tbody>里。

該編程用到兩個知識點，一個是數組的排序，這里用的函數是arr.sort()和localeCompare()方法。另一知識點是向文檔添加已排好序的節點，這里用到createDocumentFragment()方法。

對表格tr td的操作，你也可以參考如下這些文章。

• jQuery使用closest()方法獲得表格單元格(table td)值
• jQuery使用Array數組數據創建動態HTML表（html table）
• 用jQuery remove()方法刪除表格行(table tr)的寫法
• jQuery獲得Table表格單元格TD值的4種方式

總結

該方法可以快速對Table表格tr進行升降排序，該程序針對最簡單的表格而寫，如果表格變得復雜，例如td內又嵌套有另外的Table表格，這種情況就麻煩一些了，但還是可以在此程序的基礎上進行補充編程。我們只需明白了編程思想，而本程序已經提供了關鍵的函數方法。這對于復雜的表格也是能夠處理的。

標簽: table