[英]Sorting a column of table in Javascript not functioning properly
我从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工作表上,并试图对其进行排序,但是它也没有正确排序。 值有问题吗?
它只是考虑数字的第一个数字然后进行排序。 我怎样才能解决这个问题?
根据字符串操作比较规则,结果是正确的,但是您的要求有所不同。
字符串比较如何发生? A <B
它比较两个字符串的第一位的UTF-16值是否相等,然后比较下一个字符。
如果A的字符串字符在某个点上小于B,则A字符串会更小。
如果任何字符串将在得出结论之前结束,则将其视为小字符串。
例如
对于您的问题,您需要在[[,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;
}
简而言之,使用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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.