在Javascript中对一列表进行排序无法正常运行

时间:2017-07-21 15:06:41

标签: javascript function sorting html-table

我有来自w3schools的以下Javascript函数来对列进行排序:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  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;
      }
    }
  }
}

但是,在我的名为Internet Explorer版本的专栏中,它并不能很好地工作。

它适用于我桌子的其他列。我不知道为什么会这样。有人可以告诉我出了什么问题吗?

我将这些值复制到Excel工作表上并尝试对其进行排序,但它也没有正确排序。它是值的问题吗?

只是将数字的第一位数考虑在内,然后进行排序。我该如何解决这个问题?

2 个答案:

答案 0 :(得分:2)

根据字符串操作比较规则,结果是正确的,但您的要求是不同的。

如何进行字符串比较? A&lt;乙

  1. 它比较两个字符串的第一个数字的UTF-16值,如果它相等,则比较下一个字符。

  2. 如果A字符串的某个字符在某个点小于B,则A字符串会更小。

  3. 如果任何字符串在结束之前结束它将被视为小字符串。

  4. 例如

    1. “10.0.9200.17609”&lt; “11.0.15063.0”=真,因为在第二位0&lt; 1
    2. “9”&lt; “101”= false,因为'9'的UTF-16值大于'1'
    3. “101”&lt; “1011”=真,因为直到3个字符都相等而第一个字符串结束所以它更小。
    4. 对于您的问题,您需要拆分数字。(点) 分割后的“10.0.9200.17609”[10,0,9200,17609] 那么您需要使用以下比较器函数来确定排序算法中哪个元素更小。

      /** 
        A and B will be array and element are integer
        return true if A < B else false
      **/
      function comparator(A, B) {
         var a_length = A.length, b_length = B.length;
         var loop_count = min(a_length, b_length);
         for(var i = 0; i < loop_count; i++) {
           if(A[i] < B[i])
              return true;
           else if (A[i] > B[i])
              return false;
         }
      
         if(a_length < b_length)
           return true;
      
         return false;
      }
      

答案 1 :(得分:1)

简而言之,使用100000创建填充,例如

8.00.6001.18372 => 100008.100000.106001.118372
11.0.15063.0 => 100011.100000.115063.100000

使用正则表达式

x = x.innerHTML.replace(/\d+/g, n => +n + 100000);

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  /*Make a loop that will continue until
  no switching has been done:*/
  // get longest version characters for padding
  var padding = '000000000000'; // 12 chars
  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:*/
      // the hack, remove dot      
      x = x.innerHTML.replace(/\d+/g, n => +n + 100000);
      y = y.innerHTML.replace(/\d+/g, n => +n + 100000);
     //console.log(x)
      if (dir == "asc") {
        if (x > y) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x < y) {
          //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;
      }
    }
  }
}
document.querySelector('#thead').addEventListener('click', function() {
  sortTable(0);
})
table {
  border: 1px solid #dddddd;
  width: 60%;
  border-collapse: collapse;
}

th {
  background-color: #209d9d;
  cursor: pointer;
}

th:hover {
  background-color: #1c8d8d;
}

tr {
  height: 30px;
}

th,
td {
  text-align: center;
  border-collapse: collapse;
  width: 60%;
  border: 1px solid #ddd;
  align: center
}
<table id="myTable">
  <tr><th id="thead">IE Versions</th></tr>
  <tr><td>10.0.8250.00000</td></tr>
  <tr><td>10.0.8400.00000</td></tr>
  <tr><td>10.0.9200.16384</td></tr>
  <tr><td>8.00.6001.18372</td></tr>
  <tr><td>8.00.6001.18702</td></tr>
  <tr><td>8.00.7000.00000</td></tr>
  <tr><td>8.00.7600.16385</td></tr>
  <tr><td>9.0.8080.16413</td></tr>
  <tr><td>9.0.8112.16421</td></tr>
  <tr><td>10.0.9200.17609</td></tr>
  <tr><td>11.0.15063.0</td></tr>
  <tr><td>11.0.9600.18697</td></tr>
  <tr><td>8.00.6001.18241</td></tr>
</table>