javascript - 如何向我的表格添加工作排序？

Question

我对排序有问题，我也是这方面的初学者，所以不知道该怎么办了。我正在尝试为学校项目制作网站。我尝试了许多其他选择，这就是我现在所拥有的，也许我走错了路，但问题是我真的不知道。就像我写的那样，她是初学者，希望有人能提供帮助。由于我的定位，第一个也是空白的，也不知道如何定位。如果我没有空白的 TH，图片上方的 Ime 不是游戏名称。

下面是我的代码：

function sortTable(n) {
  var table,
    rows,
    switching,
    i,
    x,
    y,
    shouldSwitch,
    dir,
    switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  dir = "asc";
  while (switching) {
    switching = false;
    rows = table.getElementsByTagName("TR");
    for (i = 0; i < rows.length - 1; i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {

      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

<nav>
  <ul>
    <li><a href="#prijava">Prijava</a></li>
    <li><a href="#registracija">Registracija</a></li>
    <div class="onas">
      <li><a href="#onas">O nas</a></li>
    </div>
</nav>
<table id="myTable">
  <tr>
    <th></th>
    <th onclick="sortTable(0)">Ime</th>
    <th onclick="sortTable(1)">Opis</th>
    <th onclick="sortTable(2)">Ocena</th>
  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/9nGoBZ0MRbi6rdH47sj2Qg__thumb/img/ezXcyEsHhS9iRxmuGe8SmiLLXlM=/fit-in/200x150/filters:strip_icc()/pic5786795.jpg" alt="Monopoly"></td>
    <td>Monopoly</td>
    <td>2-8 igralcev. Trajanje igre 180 minut.</td>
    <td>50</td>

  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/7SrPNGBKg9IIsP4UQpOi8g__thumb/img/gAxzddRVQiRdjZHYFUZ2xc5Jlbw=/fit-in/200x150/filters:strip_icc()/pic4325841.jpg" alt="Star Wars: Rebellion"></td>
    <td>Star Wars: Rebellion</td>
    <td>2-4 igralcev. Trajanje igre 240 min.</td>
    <td>94</td>
  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/wg9oOLcsKvDesSUdZQ4rxw__thumb/img/BTxqxgYay5tHJfVoJ2NF5g43_gA=/fit-in/200x150/filters:strip_icc()/pic3536616.jpg" alt="Terraforming Mars"></td>
    <td>Terraforming Mars</td>
    <td>1-5 igralcev. Trajanje igre 120 min.</td>
    <td>80</td>
  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/ImPgGag98W6gpV1KV812aA__thumb/img/X-lBBdG4uO6LT0y1vXxCN4jdR4M=/fit-in/200x150/filters:strip_icc()/pic1215633.jpg" alt="War of the Ring: Second Edition"></td>
    <td>War of the Ring: Second Edition</td>
    <td>1-5 igralcev. Trajanje igre 120 min.</td>
    <td>80</td>
  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/w0ZzhcxnGk6VbMrOpZhUTg__thumb/img/w3ruv1OpGPKa4HFbl2n1Oh_5vUI=/fit-in/200x150/filters:strip_icc()/pic59467.jpg" alt="Airplay"></td>
    <td>Airplay</td>
    <td>2-6 igralcev. Trajanje igre 90 min.</td>
    <td>80</td>
  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/5VDnpX_3ykgCjTJSmHdfCA__thumb/img/LLHF9t1MxB0m-NBe_C9cxAyIslA=/fit-in/200x150/filters:strip_icc()/pic2884509.jpg" alt="Junk Art"></td>
    <td>Junk Art</td>
    <td>2-6 igralcev. Trajanje igre 30 min.</td>
    <td>80</td>
  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/CH5slprDxeQxJ6ycgViMpA__thumb/img/-cbJd7VCHOgeiTEoCzV5iaynIwQ=/fit-in/200x150/filters:strip_icc()/pic825679.jpg" alt="Dread House"></td>
    <td>Dread House</td>
    <td>2-6 igralcev. Trajanje igre 90 min.</td>
    <td>80</td>
  </tr>
  <tr>
    <td><img src="https://cf.geekdo-images.com/5tCMB5hjWBNs-kD4DSEZMw__thumb/img/rWjN-iR4gWM69bz8aCSnGl74vrw=/fit-in/200x150/filters:strip_icc()/pic299522.jpg" alt="Get the Gem"></td>
    <td>Get the Gem</td>
    <td>2 igralca. Trajanje igre / min.</td>
    <td>80</td>
  </tr>

</table>

标签： javascripthtmlsorting