卡卡網(wǎng)

我們經(jīng)常要對(duì)表格數(shù)據(jù)進(jìn)行升降排序，以便更方便的查看數(shù)據(jù)。不少方法都可以實(shí)現(xiàn)這一功能，不過(guò)今天介紹的這個(gè)方法，是用JS實(shí)現(xiàn)的，代碼少，速度快，不用第三方插件，值得推薦使用。

demodownload

實(shí)例介紹

這個(gè)表格是記錄學(xué)生的一些信息，包括姓名、年齡、性別，但表格數(shù)據(jù)排序凌亂無(wú)序?，F(xiàn)在我們要按照年齡查看學(xué)生信息，因此需要對(duì)表格進(jìn)行重新排序。

這就是我們將要用JS做的工作，當(dāng)點(diǎn)擊表頭的“年齡”時(shí)，會(huì)對(duì)表格進(jìn)行按“年齡”升降排序。

實(shí)例代碼

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只是對(duì)表格的樣式設(shè)置，與程序的實(shí)現(xiàn)無(wú)關(guān)。

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>歐陽(yáng)珊珊</td>
        <td>女</td>
        <td>15</td>
      </tr>
      <tr>
        <td>李小剛</td>
        <td>男</td>
        <td>20</td>
      </tr>
    </tbody>
</table>

這里僅提供要操作的Table表格代碼。要注意的是表格內(nèi)容的tr標(biāo)簽外有個(gè)<tbody>標(biāo)簽，這個(gè)不能少，因?yàn)镴S編程代碼需要尋找這個(gè)標(biāo)簽。

JS

<script>
  var score = document.getElementById('score');
  var tbody = document.getElementsByTagName('tbody')[0]; //獲取文檔下的第一個(gè)tbdoy
  var tr = tbody.getElementsByTagName('tr'); //獲取tbody下的tr（數(shù)組）
  var arr = [];
  var isAsc = true; //判斷當(dāng)前排序是否是正序
  score.onclick = function() {
    if(!isAsc) { //如果是反序，則進(jìn)行一下操作 
      for(var i = 0; i < tr.length; i++) {
        arr.push(tr[i]); //把tr數(shù)組復(fù)制到arr數(shù)組
      }
      arr.sort(function(tr1, tr2) { //數(shù)組排序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(); //進(jìn)行文檔添加操作
      isAsc = true; //點(diǎn)擊之后反轉(zhuǎn)一下順序
    } else { //如果是正序，則進(jìn)行一下操作
      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() { //向文檔添加已排好序的節(jié)點(diǎn)
    var fragment = document.createDocumentFragment(); //當(dāng)你想提取文檔的一部分，改變，增加，或刪除某些內(nèi)容及插入到文檔末尾可以使用createDocumentFragment() 方法
    for(var j = 0; j < arr.length; j++) {
      fragment.appendChild(arr[j]); //把數(shù)組中的元素添加到節(jié)點(diǎn)的子節(jié)點(diǎn)列表的末尾
    }
    tbody.appendChild(fragment); //把fragment添加到tbody
  }
</script>

編程思想

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

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

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

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

總結(jié)

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

標(biāo)簽: table