table排序

最新推荐文章于 2018-12-18 15:43:00 发布

sjy7329

最新推荐文章于 2018-12-18 15:43:00 发布

阅读量355

点赞数

分类专栏： table

本文链接：https://blog.csdn.net/sunjynyue/article/details/78070352

版权

table 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script>
  window.onload = function () {
    var oBtn = document.getElementById('btn');
    var oTab = document.getElementById('tab');

    oBtn.onclick = function () {
      var oTr = oTab.getElementsByTagName('tr');

      var arr = [];
      for (var i = 0; i < oTr.length; i++) {
        arr[i] = oTr[i];
      }

      arr.sort(function (tr1, tr2) {
        n1 = parseInt(tr1.cells[2].innerHTML);
        n2 = parseInt(tr2.cells[2].innerHTML);
        return n1 - n2;
      });
      for (var j = 0; j < arr.length; j++) {
        oTab.tBodies[0].appendChild(arr[j]);
      }
    }
  }
</script>
<body>
<button id="btn">排序</button>
<br/>
<table id="tab" width="200px" border="1">
  <thead>
  <tr>
    <th>id</th>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>1</td>
    <td>张三</td>
    <td>67</td>
  </tr>
  <tr>
    <td>2</td>
    <td>李四</td>
    <td>36</td>
  </tr>
  <tr>
    <td>3</td>
    <td>王五</td>
    <td>69</td>
  </tr>
  <tr>
    <td>4</td>
    <td>赵六</td>
    <td>20</td>
  </tr>
  <tr>
    <td>5</td>
    <td>张某</td>
    <td>45</td>
  </tr>
  </tbody>
</table>
</body>
</html>