javascript - 按子字符串对表格进行排序

Question

我正在尝试按类(class)编号对表格进行排序，但我需要使用子字符串按编号进行排序。例如，类(class)名称看起来像 CX-001，我想忽略前三个字符。我正在使用 Vanilla Javascript。我不确定在哪里应用子字符串，但我知道我弄错了。

function sortSubNum(subNum) {
  var switchcount = 0;

  var table = document.getElementById("myTable2").substring(2);
  var switching = true;
  // Set the sorting direction to ascending:
  var dir = "asc";
  /* Make a loop that will continue until
  no switching has been done: */
  while (switching) {
    switching = false;
    var rows = table.rows;
    var shouldSwitch;
    for (var i = 1; i < (rows.length - 1); i++) {

      var x = rows[i].getElementsByTagName("TD")[subNum];
      var y = rows[i + 1].getElementsByTagName("TD")[subNum];
      //var resX = x.substring(2);
      //var resY = y.substring(2);

      if (dir === "asc") {
        if (Number(x.textContent.substring(2)) < Number(y.textContent.substring(2))) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir === "desc") {
        if (Number(x.textContent.substring(2)) > Number(y.textContent.substring(2))) {
          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;
      }
    }
  }
}
sortSubNum(1);

<table id="myTable2">
  <thead>
    <tr>
      <th>Teacher</th>
      <th>Course Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>CS-301</td>
    </tr>
    <tr>
      <td>Kelly</td>
      <td>CX-201</td>
    </tr>
    <tr>
      <td>Park</td>
      <td>CS-001</td>
    </tr>
  </tbody>
</table>

Answer 1

虽然您已经在您的代码中发现了问题，但我的解决方案是基于@Patrick Roberts 在评论中给出的建议。

Instead of implementing your own sorting method directly on the DOM, consider initializing an Array of elements and calling Array.prototype.sort(), then reinserting the newly ordered elements back into the table. It would be a lot faster and less error-prone

function sortTable(tbody, col, asc){
    var rows = tbody.rows;
    var rowsLen = tbody.rows.length;
    var arr = new Array();
    var i, j, cells, cellLen;
    // fill the array with values from the table
    for(i = 0; i < rowsLen; i++){
    cells = rows[i].cells;
    cellLen = cells.length;
    arr[i] = new Array();
        for(j = 0; j < cellLen; j++){
          arr[i][j] = cells[j].innerHTML;
        }
    }
    //short the array
    arr.sort(function(a, b){
       //this is your use case.sort the data in array after spilt.
       var aCol=a[col].split("-")[1];
       var bCol=b[col].split("-")[1];
       return (aCol == bCol) ? 0 : ((aCol > bCol) ? asc : -1*asc);
    });
    
    for(i = 0; i < rowsLen; i++){
        arr[i] = "<td>"+arr[i].join("</td><td>")+"</td>";
    }
    tbody.innerHTML = "<tr>"+arr.join("</tr><tr>")+"</tr>";
}
var tbody=document.getElementById("myTable2Tbody");
sortTable(tbody,1, 1);
//for asc use 1,for dsc use -1

<table id ="myTable2">
    <thead>
        <tr>
            <th>Teacher</th>
            <th>Course Number</th>
        </tr>
    </thead>
    <tbody id ="myTable2Tbody">
        <tr>
            <td>Smith</td>
            <td>CS-301</td>
        </tr>
        <tr>
            <td>Kelly</td>
            <td>CX-201</td>
        </tr>
        <tr>
            <td>Park</td>
            <td>CS-001</td>
        </tr>        
    </tbody>
</table>