如何用javascript对html表格进行排序？答案

【问题标题】：How to sort html table with javascript?如何用javascript对html表格进行排序？
【发布时间】：2017-05-27 21:04:48
【问题描述】：

我有这样的表，它是由多个 mysql 表中的多个 php 代码创建的。

我只想通过javascript按日期列（第二个TD）对其进行排序。

更新：我只需要在页面加载时按日期列自动排序的表格。我不想通过单击theads 再次对其进行排序。而且这不是我页面中唯一的表格。所以我需要告诉 javascript 我应该对哪个表进行排序。

有人知道吗？

【问题讨论】：

为什么不事先在服务器端进行排序？
因为我通过许多 mysql 表中的许多选择查询创建了这个表。在每次选择查询后打印 TR。这就是为什么我不能通过 order by 的查询对其进行排序。
那么你真的应该在打印tr之前等待所有数据
看看w3schools.com/w3js/w3js_sort.asp
制作一个描述表格的数据结构，用表格数据填充结构，对其进行排序，然后将其发送回客户端。这只是用户在服务器端看到数据之前的一步。

标签： javascript sorting html-table

【解决方案1】：

如果您不必考虑数据的服务器端分页，请查看 jquery tablesorter。演示权here。

【讨论】：

谢谢，但排序不准确。只是某些行正在更改，因为它是按日期列的 DAY 值排序的。不是总日期。
看看日期格式mottie.github.io/tablesorter/docs/…
在比较值之前转换 sortFunction 中的日期.. 给多个表一个 id 并更改选择器...

【解决方案2】：

我的抽屉柜里有一个纯js的解决方案……

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
    <style>
        table{
            width: 500px;
        }

        th, td {
        text-align: center;
        min-width:200px;
        }

        td:nth-child(1), th:nth-child(1) {
            min-width: 100px;
        }

        thead {
            background-color: #000;
            color: #fff;
        }

        thead tr {
            display: block;
            position: relative;
        }

    tbody {
        display: block;
        overflow: auto;
       overflow-x:hidden;
        width: 100%;
        height: 100px;
    }

    tbody tr:nth-child(even) {
        background-color: #dddddd;
    }

    </style>
<body>

<table>
    <thead>
        <tr>
            <th>Nummer</th>
            <th>Deutsch</th>
            <th>Englisch</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>eins</td>
            <td>one</td>
        </tr>
        <tr>
            <td>2</td>
            <td>zwei</td>
            <td>two</td>
        </tr>
        <tr>
            <td>3</td>
            <td>drei</td>
            <td>three</td>
        </tr>
        <tr>
            <td>4</td>
            <td>vier</td>
            <td>four</td>
        </tr>
        <tr>
            <td>5</td>
            <td>fünf</td>
            <td>five</td>
        </tr>
        <tr>
            <td>6</td>
            <td>sechs</td>
            <td>six</td>
        </tr>
        <tr>
            <td>7</td>
            <td>sieben</td>
            <td>seven</td>
        </tr>
        <tr>
            <td>8</td>
            <td>acht</td>
            <td>eight</td>
        </tr>
        <tr>
            <td>9</td>
            <td>neun</td>
            <td>nine</td>
        </tr>

    </tbody>
</table>    

<script>
   eval('var $=x($,_){return(_)?[].slice.call(zAll($)).forEach(_):z($)},$s=x(e,r,v){$(e,x(_){_.style[r]=v})},$o=x(e,v,f){$(e,x(_){_.addEventListener(v,f)})}'.replace(/x/g,"function").replace(/z/g,'document.querySelector'));
   function colSort(a, colIndex){
      a.sort(sortFunction);
      function sortFunction(a, b) {
          if (a[colIndex] === b[colIndex]) {
              return 0;
          }
          else {
              return (a[colIndex] < b[colIndex]) ? -1 : 1;
          }
      }
      return a;
   }
   var tableContent = [],count = 0;
    $('tbody tr', function(_){
      tableContent[count]=[];
      var cols = _.querySelectorAll('td');
      for (i=0;i<cols.length;i++){
        tableContent[count][i]=cols[i].innerHTML;
      }
      count++;
      });
    
    var sortCol=function(colToSort){
      var temp = [];
          $('thead tr th', function(_){
            temp.push(_.innerHTML);
          })
          //var cSort = temp.indexOf(this.innerHTML);
          var newSort = colSort(tableContent,colToSort-1);
          count =0;  
          $('tbody tr', function(_){
            var cols = _.querySelectorAll('td');
            for (i=0;i<cols.length;i++){
              cols[i].innerHTML=newSort[count][i];
          }
          count++;
        });
    }
    sortCol(2);
    
</script>

</body>
</html>

【讨论】：

这很简单，我已经更改了我的代码。只调用 sortCol(2) 或你必须排序的 Col