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

<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>

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;
}