按两列对HTML表进行排序
我在表格中有几列，例如A，B，C，D和E列，我需要在HTML页面中显示。 在某些页面中，我需要仅基于一列页面显示排序结果，例如列“C”（表格的第3列）。 我可以使用以下代码执行此操作：
function Ascending(a, b) { if (a b) return 1; return 0; } var rows = $('#table tr').not(':first').get(); $('#table tr').slice(1).remove(); rows.sort(function(rowA, rowB) { var keyA = $(rowA).children('td').eq(2).text().toUpperCase(); var keyB = $(rowB).children('td').eq(2).text().toUpperCase(); return Ascending(keyA, keyB); }); 但我有另一个要求，其中我需要根据两列显示排序结果，即在上述情况下基于C列的排序，列E的结果也应该排序。 例如：
排序前：
Column C Column E 2 Fish 1 Box 7 Cat 2 Dog 1 Apple 2 Box 2 Axe 7 Box 2 Answer 7 Apple 6 Year 2 Goat
仅排序C列后：
Column C Column E 1 Box 1 Apple 2 Dog 2 Fish 2 Box 2 Axe 2 Goat 2 Answer 6 Year 7 Box 7 Apple 7 Cat
排序C列然后排E列：
Column C Column E 1 Apple 1 Box 2 Answer 2 Axe 2 Box 2 Dog 2 Fish 2 Goat 6 Year 7 Apple 7 Box 7 Cat
我无法实现。 我该怎么做？
要按多个列排序，您可以像这样编写比较函数：
（比较函数传递两个“行”）
- 将第1行第1列与第2列第1列进行比较
- 如果它们不同则返回结果（a + ve或-ve数）
- 将第1行第2列与第2列第2列进行比较
- 如果它们不同则返回结果（a + ve或-ve数）
- 重复其余列
- 返回0
以下示例显示如何编写按两列排序的比较函数。 可以使用循环或递归来按n列排序。
$(function() { function sortByColumn3(row1, row2) { var v1, v2; v1 = $(row1).find("td:eq(2)").text(); v2 = $(row2).find("td:eq(2)").text(); // for numbers you can simply return ab instead of checking greater/smaller/equal return v1 - v2; } function sortByColumn3And5(row1, row2) { var v1, v2, r; v1 = $(row1).find("td:eq(2)").text(); v2 = $(row2).find("td:eq(2)").text(); r = v1 - v2; if (r === 0) { // we have a tie in column 1 values, compare column 2 instead v1 = $(row1).find("td:eq(4)").text(); v2 = $(row2).find("td:eq(4)").text(); if (v1 < v2) { r = -1; } else if (v1 > v2) { r = 1; } else { r = 0; } } return r; } $("#button1, #button2").on("click", function() { var rows = $("#table1 tbody tr").detach().get(); switch (this.id) { case "button1": rows.sort(sortByColumn3); break; case "button2": rows.sort(sortByColumn3And5); break; } $("#table1 tbody").append(rows); }); });
1 2 3 4 5 x y 2 z Fish y z 1 x Box z x 7 y Cat x y 2 z Dog y z 1 x Apple z x 2 y Box x y 2 z Axe y z 7 x Box z x 2 y Answer x y 7 z Apple y z 6 x Year z x 2 y Goat
function sortTable() { var table, rows, switching, i, x, y, a, b, shouldSwitch; table = document.getElementById("mytable"); switching = true; while (switching) { switching = false; rows = table.getElementsByTagName("TR"); for (i = 0; i < (rows.length - 1); i++) { shouldSwitch = false; /*Get the two elements you want to compare, one from current row and one from the next:*/ x = rows[i].getElementsByTagName("TD")[3]; y = rows[i + 1].getElementsByTagName("TD")[3]; //check if the two rows should switch place: if (Number(x.innerHTML) < Number(y.innerHTML)) { //if so, mark as a switch and break the loop: shouldSwitch = true; break; } } if (shouldSwitch) { /*If a switch has been marked, make the switchcand mark that a switch has been done:*/ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; } } for (i = 0; i < (rows.length - 1); i++) { /*Get the two elements you want to compare,one from current row and one from the next:*/ for (j = i + 1; j < (rows.length); j++) { x = rows[i].getElementsByTagName("TD")[3]; y = rows[j].getElementsByTagName("TD")[3]; a = rows[i].getElementsByTagName("TD")[0]; b = rows[j].getElementsByTagName("TD")[0]; //check if the two rows should switch place: if (Number(x.innerHTML) == Number(y.innerHTML)) { //if so, swap if (Number(a.innerHTML) > Number(b.innerHTML)) { rows[i].parentNode.insertBefore(rows[j], rows[i]); } } } } }
Id Image Name Price 5 
cony #5 170 1 
cony #1 170 2 
cony #2 270 8 
cony #8 70 10 
cony #10 170 4 
cony #4 150 3 
cony #3 130 6 
cony #6 160 9 
cony #9 170 7 
cony #7 170