如何在单击时按列标题排序，然后在再次单击时按相反顺序排序？

在前端开发中，实现表格列标题点击排序的功能通常涉及到JavaScript（或TypeScript）和HTML。以下是一个简单的示例，展示了如何实现这一功能：

HTML部分

<table id="myTable">
  <thead>
    <tr>
      <th onclick="sortTable(0)">Column 1</th>
      <th onclick="sortTable(1)">Column 2</th>
      <th onclick="sortTable(2)">Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Row 1 Col 1</td><td>Row 1 Col 2</td><td>Row 1 Col 3</td></tr>
    <tr><td>Row 2 Col 1</td><td>Row 2 Col 2</td><td>Row 2 Col 3</td></tr>
    <!-- 更多行数据 -->
  </tbody>
</table>

JavaScript部分

let sortOrder = 1; // 1 for ascending, -1 for descending

function sortTable(columnIndex) {
  const table = document.getElementById("myTable");
  const rows = Array.from(table.rows).slice(1); // 排除表头
  const header = table.rows[0].cells[columnIndex].textContent;

  rows.sort((a, b) => {
    const aValue = a.cells[columnIndex].textContent;
    const bValue = b.cells[columnIndex].textContent;

    if (aValue < bValue) return -sortOrder;
    if (aValue > bValue) return sortOrder;
    return 0;
  });

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

  rows.forEach(row => table.appendChild(row));

  // 切换排序顺序
  sortOrder *= -1;
}

解释

HTML部分：每个列标题都有一个onclick事件，调用sortTable函数并传递列索引。
JavaScript部分：
- sortOrder变量用于跟踪当前的排序顺序（升序或降序）。
- sortTable函数获取表格和行数据，并根据列索引进行排序。
- 排序后，清空表格内容并重新填充排序后的行数据。
- 切换sortOrder变量的值，以便在下一次点击时按相反顺序排序。