在JavaScript中使用addEventListener对HTML表格进行排序

// 获取表格元素
var table = document.getElementById("myTable");

// 获取表头单元格元素，并为其添加点击事件监听器
var headerCells = table.querySelectorAll("th");
headerCells.forEach(function(cell) {
  cell.addEventListener("click", function(event) {
    // 获取列索引
    var columnIndex = event.target.cellIndex;

    // 获取所有行元素，并转换为数组
    var rows = Array.from(table.querySelectorAll("tbody tr"));

    // 对行数组进行排序
    rows.sort(function(a, b) {
      var aValue = a.cells[columnIndex].textContent;
      var bValue = b.cells[columnIndex].textContent;
      return aValue.localeCompare(bValue, undefined, { numeric: true });
    });

    // 清空表格内容
    while (table.tBodies[0].firstChild) {
      table.tBodies[0].removeChild(table.tBodies[0].firstChild);
    }

    // 将排序后的行数组重新插入到表格中
    rows.forEach(function(row) {
      table.tBodies[0].appendChild(row);
    });
  });
});