javascript - 排序 HTML 表格无法正常工作

Question

我有一个 HTML 表格:

<table id="myTable2" border="1">
 <tr>
    <th onclick="sortTable(0)"> Code </th>
    <th onclick="sortTable(1)"> Name </th>
    <th onclick="sortTable(2)"> Total Input </th>
    <th onclick="sortTable(3)"> Total Output </th>
    <th onclick="sortTable(4)"> Total Retour </th>
    <th onclick="sortTable(5)"> Stock Left </th>
    <th onclick="sortTable(6)"> Safety Stock </th>
    <th onclick="sortTable(7)"> Stock Status </th>
 </tr>
</table>

我正在尝试使用此脚本向其添加排序功能:

<script>
    function sortTable(n) {
      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("myTable2");
      switching = true;
      //Set the sorting direction to ascending:
      dir = "asc"; 
      /*Make a loop that will continue until
      no switching has been done:*/
      while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.getElementsByTagName("TR");
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i++) {
          //start by saying there should be no switching:
          shouldSwitch = false;
          /*Get the two elements you want to compare,
          one from current row and one from the next:*/
          x = rows[i].getElementsByTagName("TD")[n];
          y = rows[i + 1].getElementsByTagName("TD")[n];
          /*check if the two rows should switch place,
          based on the direction, asc or desc:*/
          if (dir == "asc") {
            if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
              //if so, mark as a switch and break the loop:
              shouldSwitch= true;
              break;
            }
          } else if (dir == "desc") {
            if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
              //if so, mark as a switch and break the loop:
              shouldSwitch= true;
              break;
            }
          }
        }
        if (shouldSwitch) {
          /*If a switch has been marked, make the switch
          and mark that a switch has been done:*/
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          //Each time a switch is done, increase this count by 1:
          switchcount ++;      
        } else {
          /*If no switching has been done AND the direction is "asc",
          set the direction to "desc" and run the while loop again.*/
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }
    </script>

对于前两列(代码和名称)，排序功能完美运行，包括升序和降序选项。但是表的其余部分，该功能无法正常工作。几行向上或向下移动，但没有按排序顺序排列。有人可以告诉我如何解决这个问题吗？谢谢。

Answer 1

将您的功能更改为:

<script>
    function sortTable(n,isNum) {
      var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
      table = document.getElementById("myTable2");
      switching = true;
      //Set the sorting direction to ascending:
      dir = "asc"; 
      /*Make a loop that will continue until
      no switching has been done:*/
      while (switching) {
        //start by saying: no switching is done:
        switching = false;
        rows = table.getElementsByTagName("TR");
        /*Loop through all table rows (except the
        first, which contains table headers):*/
        for (i = 1; i < (rows.length - 1); i++) {
          //start by saying there should be no switching:
          shouldSwitch = false;
          /*Get the two elements you want to compare,
          one from current row and one from the next:*/
          x = rows[i].getElementsByTagName("TD")[n].innerHTML;
          y = rows[i + 1].getElementsByTagName("TD")[n].innerHTML;
          if (isNum) {
          /* Convert to float */
          x = parseFloat(x);
          y = parseFloat(y); 
          }
          else
           {
           /* change to lowercase */
           x = x.toLowerCase();
           y = y.toLowerCase();
           }
          /*check if the two rows should switch place,
          based on the direction, asc or desc:*/
          shouldSwitch = ((dir =="asc") && (x>y)) || ((dir =="desc" && (x<y))
        if (shouldSwitch) {
          /*If a switch has been marked, make the switch
          and mark that a switch has been done:*/
          rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
          switching = true;
          //Each time a switch is done, increase this count by 1:
          switchcount ++;      
        } else {
          /*If no switching has been done AND the direction is "asc",
          set the direction to "desc" and run the while loop again.*/
          if (switchcount == 0 && dir == "asc") {
            dir = "desc";
            switching = true;
          }
        }
      }
    }
    </script>

将您的 HTML 更改为:

<table id="myTable2" border="1">
 <tr>
    <th onclick="sortTable(0, 0)"> Code </th>
    <th onclick="sortTable(1, 0)"> Name </th>
    <th onclick="sortTable(2, 1)"> Total Input </th>
    <th onclick="sortTable(3, 1)"> Total Output </th>
    <th onclick="sortTable(4, 1)"> Total Retour </th>
    <th onclick="sortTable(5, 1)"> Stock Left </th>
    <th onclick="sortTable(6, 1)"> Safety Stock </th>
    <th onclick="sortTable(7, 1)"> Stock Status </th>
 </tr>
</table>