在Javascript中单击表头时，按升序和降序对表进行排序

// 获取表头元素
var tableHeader = document.querySelector('thead tr');

// 添加click事件监听器
tableHeader.addEventListener('click', function(event) {
  // 获取表头所在的表格元素
  var table = event.target.closest('table');
  
  // 获取需要排序的列索引
  var columnIndex = Array.from(tableHeader.children).indexOf(event.target);
  
  // 获取表格所有行元素
  var rows = Array.from(table.tBodies[0].rows);
  
  // 根据列索引和当前排序状态进行排序
  if (event.target.classList.contains('asc')) {
    rows.sort((a, b) => {
      return a.cells[columnIndex].textContent.localeCompare(b.cells[columnIndex].textContent);
    });
    // 移除排序样式
    event.target.classList.remove('asc');
    event.target.classList.add('desc');
  } else {
    rows.sort((a, b) => {
      return b.cells[columnIndex].textContent.localeCompare(a.cells[columnIndex].textContent);
    });
    // 移除排序样式
    event.target.classList.remove('desc');
    event.target.classList.add('asc');
  }
  
  // 更新表格的行顺序
  rows.forEach(row => table.tBodies[0].appendChild(row));
});