如何使用同一函数按TableId对页面中多个表格进行排序？

没问题！我帮你修改这个脚本，让它能完美支持页面上的多个表格。原来的W3Schools示例脚本硬绑定了单个表格，我们只需要调整函数逻辑，让它能识别当前点击表头所属的表格即可，具体修改如下：

完整修改后的代码 #

HTML部分 #

<table id="tableData1">
  <tr>
    <th onclick="sortTable('tableData1', 0)">Input Date</th>
    <th onclick="sortTable('tableData1', 1)">Periode</th>
    <th onclick="sortTable('tableData1', 2)">Account</th>
  </tr>
  <tr>
    <td>2019-05-13</td>
    <td>2019-05</td>
    <td>Name A</td>
  </tr>
  <tr>
    <td>2019-04-02</td>
    <td>2019-04</td>
    <td>Name A</td>
  </tr>
  <tr>
    <td>2019-03-02</td>
    <td>2019-03</td>
    <td>Name A</td>
  </tr>
</table>

<table id="tableData2">
  <tr>
    <th onclick="sortTable('tableData2', 0)">Input Date</th>
    <th onclick="sortTable('tableData2', 1)">Periode</th>
    <th onclick="sortTable('tableData2', 2)">Account</th>
  </tr>
  <tr>
    <td>2019-05-10</td>
    <td>2019-05</td>
    <td>Name B</td>
  </tr>
  <tr>
    <td>2019-04-01</td>
    <td>2019-04</td>
    <td>Name B</td>
  </tr>
  <tr>
    <td>2019-03-05</td>
    <td>2019-03</td>
    <td>Name B</td>
  </tr>
</table>

JavaScript部分 #

function sortTable(tableId, n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  // 根据传入的表格ID获取目标表格
  table = document.getElementById(tableId);
  switching = true;
  // 设置初始排序方向为升序
  dir = "asc";
  
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      // 获取当前行和下一行的目标列内容
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      
      // 根据当前排序方向判断是否需要交换
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    
    if (shouldSwitch) {
      // 交换行位置
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount ++;
    } else {
      // 如果没有交换过，切换排序方向并重新循环
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

关键修改说明 #

• 传递表格ID：给每个表头的onclick事件添加了表格ID参数，比如sortTable('tableData1', 0)，这样函数能明确知道要操作哪个表格
• 修复DOM获取错误：原脚本里的getElementsById是拼写错误，应该是getElementById（单数形式）
• 函数参数化：将排序列索引n和表格ID作为函数参数传入，让函数逻辑不再依赖固定表格
• 独立排序状态：每个表格的排序方向会独立维护，点击不同表格的表头不会互相干扰

内容的提问来源于stack exchange，提问作者Juniantoじゅにあんと