我希望第一，第三和第四列從A-Z按字母順序排序時，點擊該列標題，它會顛倒他們的順序時，再次點擊。

如果此列從A-Z開始排序，圖標將出現在標題旁邊；如果從Z-A開始排序，圖標將出現在標題旁邊；如果表格根據另一列排序，圖標將出現在標題旁邊。至標題。

在第一次加載時，我希望第一列從A-Z開始排序(圖標將出現在標題旁邊)，也就是說，其余的列不受排序的影響(因此圖標將出現在標題旁邊)。標題)

.sort-icon {
  display: inline-block;
  margin-left: 2px;
  font-size: 12px !important;
  vertical-align: sub;
}

.sort-arrow {
  display: none;
}

.sort-arrow.asc:before {
  content: "?";
}

.sort-arrow.desc:before {
  content: "ˇ";
}

<div class="table-container">
  <table id="myTable">
    <thead>
      <tr class="header-row">
        <th onclick="sortTable(0)" style="width: 15%;">
          <h2>COLUMN 1 <span class="sort-arrow"></span><span class="sort-icon">ˉ</span> </h2>
        </th>
        <th style="width: 18.33%;"></th>
        <th onclick="sortTable(1)" style="width: 33.33%;">
          <h2>COLUMN 3 <span class="sort-arrow"></span><span class="sort-icon">ˉ</span></h2>
        </th>
        <th onclick="sortTable(2)" style="width: 20%;">
          <h2>COLUMN 4 <span class="sort-arrow"></span><span class="sort-icon">ˉ</span></h2>
        </th>
        <th style="width: 13.33%;">
          <h2>COLUMN 5</h2>
        </th>
      </tr>
    </thead>
    <tbody class="body-table" id="scrollable-tbody">
      <tr class="COLUMN 1 ">
        <td> Z
        </td>
        <td></td>
        <td>
          A
        </td>
        <td>
          Z
        </td>
        <td></td>
      </tr>
      <tr class="COLUMN 2 ">
        <td> A
        </td>
        <td></td>
        <td>
          Z
        </td>
        <td>
          A
        </td>
        <td></td>
      </tr>
    </tbody>

  </table>

</div>




<script>
  var sortOrder = '';

  document.addEventListener("DOMContentLoaded", function() {
    var savedSortOrder = localStorage.getItem("sortOrder");
    if (savedSortOrder) {
      sortOrder = savedSortOrder;
      var sortArrow = document.getElementsByClassName('sort-arrow');
      for (var i = 0; i < sortArrow.length; i++) {
        sortArrow[i].classList.remove('asc', 'desc');
        if (i === columnIndex) {
          sortArrow[i].classList.add(sortOrder);
        }
      }
    }
    toggleSortIcon();
  });

  function sortTable(columnIndex) {
    var table, rows, switching, i, x, y, shouldSwitch;
    table = document.getElementById("myTable");
    switching = true;

    var sortArrow = document.getElementsByClassName('sort-arrow');
    for (var i = 0; i < sortArrow.length; i++) {
      sortArrow[i].classList.remove('asc', 'desc');
      if (i === columnIndex) {
        sortArrow[i].classList.add(sortOrder);
      }
    }

    while (switching) {
      switching = false;
      rows = table.rows;

      for (i = 1; i < (rows.length - 1); i++) {
        shouldSwitch = false;
        var adjustedIndex = columnIndex;
        if (columnIndex > 1) {
          adjustedIndex++;
        }
        x = rows[i].getElementsByTagName("TD")[adjustedIndex].textContent.trim();
        y = rows[i + 1].getElementsByTagName("TD")[adjustedIndex].textContent.trim();

        if (sortOrder === 'asc') {
          if (x.toLowerCase() > y.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        } else {
          if (x.toLowerCase() < y.toLowerCase()) {
            shouldSwitch = true;
            break;
          }
        }
      }

      if (shouldSwitch) {
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
      }
    }

    sortOrder = (sortOrder === 'asc') ? 'desc' : 'asc';

    localStorage.setItem("sortOrder", sortOrder);
    toggleSortIcon();
  }

  function toggleSortIcon() {
    var sortIcon = document.getElementsByClassName('sort-icon');
    var sortArrow = document.getElementsByClassName('sort-arrow');
    for (var i = 0; i < sortIcon.length; i++) {
      if (sortOrder === 'asc' || sortOrder === 'desc') {
        sortIcon[i].style.display = 'none';
        sortArrow[i].style.display = 'inline-block';
      } else {
        sortIcon[i].style.display = 'inline-block';
        sortArrow[i].style.display = 'none';
      }
    }
  }
</script>