时间戳

首页 > 解决方案 > 按子字符串排序表

javascript - 按子字符串排序表

问题描述

我正在尝试按课程编号对表格进行排序，但我需要使用子字符串按编号排序。例如，课程名称看起来像 CX-001，我想忽略前三个字符。我正在使用香草 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>

标签： javascripthtmlsortingsubstring

解决方案

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

与其直接在 DOM 上实现自己的排序方法，不如考虑初始化一个元素数组并调用 Array.prototype.sort()，然后将新排序的元素重新插入表中。它会更快，更不容易出错

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>

推荐阅读