javascript - 我在创建动态表时遇到问题？

Question

对于一个研究项目，我必须使用 JavaScript 创建一个动态表。我向一些 friend 寻求帮助，但由于他们和我都不是计算机科学家(或这方面的任何人)，我只知道使用 AJAX 和 DOM 很好。并使用以下javascipt(src = w3schools和堆栈)

问题它正在排序，但不是按字母或数字排序。它可能是表中一列中包含的图片的 URL，但对我来说它看起来是随机的。

如何创建动态工作排序表？

<table id="phones">
    <thead>
        <th><h2>Brand<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>IMG</h2></th>
        <th><h2>Model<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Os<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Screensize<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th>
        <th><h2>Price<br><p>Click to sort</p>
          <p><button onclick="sortTable()"></button></p></h2></th> 
    </thead>  ``` 

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

  while (switching) { 
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("td")[0];
      y = rows[i + 1].getElementsByTagName("td")[0];
      if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
        shouldSwitch = true;
        break;
       }
    }
    if (shouldSwitch) {      
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
          }
  }
}

Answer 1

getElementsByTagName("TD")[0] 表示访问第一个 TD 元素，但您并不总是想要第一个。相反，您需要添加一个 colNum parameter可用于在调用函数时定义的方括号中放入不同的数字。您还需要以不同于字母排序的方式对待数字排序。当您将数字视为字符串时，它们的排序方式会有所不同，如下所示:

console.log( ["19", "20", "3", "35", "1", "25", "300"].sort() );

因此，添加第二个参数，告诉函数是否应使用字母排序或数字排序。然后，在函数中，检测参数并相应排序，如下所示:

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

  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].getElementsByTagName("TD")[colNum];
      y = rows[i + 1].getElementsByTagName("TD")[colNum];
      if (sortType == "alphabetical") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          shouldSwitch = true;
          break;
        }
      } else {
        if (Number(x.innerHTML) > Number(y.innerHTML)) {
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
    }
  }
}

<table id="phones">
  <tr>
    <th><button onclick="sortTable(0, 'alphabetical');">Sort this column</button></th>
    <th><button onclick="sortTable(1, 'alphabetical');">Sort this column</button></th>
    <th><button onclick="sortTable(2, 'numerical');">Sort this column</button></th>
  </tr>
  <tr>
    <td>C</td>
    <td>A</td>
    <td>100</td>
  </tr>
  <tr>
    <td>D</td>
    <td>Z</td>
    <td>1</td>
  </tr>
  <tr>
    <td>E</td>
    <td>D</td>
    <td>19</td>
  </tr>
  <tr>
    <td>A</td>
    <td>C</td>
    <td>55</td>
  </tr>
</table>