我在表格中有几列,例如 A、B、C、D 和 E 列,我需要在我的 HTML 页面中显示这些列。在某些页面中,我需要仅根据页面的一列显示排序结果,例如表的第 3 列“C”列。我可以使用以下代码执行此操作:
function Ascending(a, b) {
if (a < b) return -1;
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 列
- 如果它们不同则返回结果(+ve 或 -ve 数字)
- 比较第 1 行第 2 列与第 2 行第 2 列
- 如果它们不同则返回结果(+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 a-b 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);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="button1" value="sortByColumn3">
<input type="button" id="button2" value="sortByColumn3And5">
<table id="table1" border="1" width="100%">
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</thead>
<tbody>
<tr>
<td>x</td>
<td>y</td>
<td>2</td>
<td>z</td>
<td>Fish</td>
</tr>
<tr>
<td>y</td>
<td>z</td>
<td>1</td>
<td>x</td>
<td>Box</td>
</tr>
<tr>
<td>z</td>
<td>x</td>
<td>7</td>
<td>y</td>
<td>Cat</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>2</td>
<td>z</td>
<td>Dog</td>
</tr>
<tr>
<td>y</td>
<td>z</td>
<td>1</td>
<td>x</td>
<td>Apple</td>
</tr>
<tr>
<td>z</td>
<td>x</td>
<td>2</td>
<td>y</td>
<td>Box</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>2</td>
<td>z</td>
<td>Axe</td>
</tr>
<tr>
<td>y</td>
<td>z</td>
<td>7</td>
<td>x</td>
<td>Box</td>
</tr>
<tr>
<td>z</td>
<td>x</td>
<td>2</td>
<td>y</td>
<td>Answer</td>
</tr>
<tr>
<td>x</td>
<td>y</td>
<td>7</td>
<td>z</td>
<td>Apple</td>
</tr>
<tr>
<td>y</td>
<td>z</td>
<td>6</td>
<td>x</td>
<td>Year</td>
</tr>
<tr>
<td>z</td>
<td>x</td>
<td>2</td>
<td>y</td>
<td>Goat</td>
</tr>
</tbody>
</table>
关于javascript - 按两列对 HTML 表格进行排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29642295/