数据表在单击表标题span时启用/禁用列排序

<table id="data-table">
  <thead>
    <tr>
      <th><span onclick="sortTable(0)">Column 1</span></th>
      <th><span onclick="sortTable(1)">Column 2</span></th>
      <th><span onclick="sortTable(2)">Column 3</span></th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
      ...
    </tr>
    ...
  </tbody>
</table>

function sortTable(columnIndex) {
  var table = document.getElementById("data-table");
  var rows = Array.from(table.getElementsByTagName("tr"));

  rows.sort(function(a, b) {
    var aData = a.getElementsByTagName("td")[columnIndex].innerText;
    var bData = b.getElementsByTagName("td")[columnIndex].innerText;
    return aData.localeCompare(bData);
  });

  // 清空表格内容
  while (table.rows.length > 1) {
    table.deleteRow(1);
  }

  // 重新插入排序后的行数据
  rows.forEach(function(row) {
    table.appendChild(row);
  });
}

th span.sorted-asc::after {
  content: " ↑";
}
th span.sorted-desc::after {
  content: " ↓";
}