极客教程JavaScript 如何对表格的行进行排序
由于JavaScript没有提供任何内置函数来对表格进行排序，我们需要使用原生方法来对给定的表格进行排序。在本文中，我们将研究这些方法。
方法： 以下两个示例将使用基本算法和类似方法。循环程序以切换和排序元素，直到排序完成。
// Executes on action like button click
Function() {
// Main loop that runs until the table is sorted
While (condition = true) {
// Runs for all rows
for (i = 1; i < row.length; i++ ) {
//Check if the switch is required
if (element_A > element_B){
// Perform switch
PerformSwitch();
}
}
}
}
示例1： 此示例使用 while循环 来交换行，直到行排序结束。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to sort rows in a table using JavaScript?
</title>
<style>
body {
text-align: center;
}
table, th, tr td {
border: 1px solid black;
}
th, td {
padding: 3px 20px;
}
table {
margin: auto;
}
</style>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<table id="table">
<tr>
<th>Country</th>
<th>Capital</th>
</tr>
<tr>
<td>United states of America</td>
<td>Washington DC</td>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>Germany</td>
<td>Berlin</td>
</tr>
</table>
<br>
<button onclick="sortTable()">
Sort
</button>
<script>
// JavaScript Program to illustrate
// Table sort on a button click
function sortTable() {
let table, i, x, y;
table = document.getElementById("table");
let switching = true;
// Run loop until no switching is needed
while (switching) {
switching = false;
let rows = table.rows;
// Loop to go through all rows
for (i = 1; i < (rows.length - 1); i++) {
var Switch = false;
// Fetch 2 elements that need to be compared
x = rows[i].getElementsByTagName("TD")[0];
y = rows[i + 1].getElementsByTagName("TD")[0];
// Check if 2 rows need to be switched
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
// If yes, mark Switch as needed and break loop
Switch = true;
break;
}
}
if (Switch) {
// Function to switch rows and mark switch as completed
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
</body>
</html>
输出：
示例2： 此示例使用相同的循环技术对表进行排序，但对给定的两列以及两个方向（升序和降序）执行函数。
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to sort rows in a table using JavaScript?
</title>
<style>
body {
text-align: center;
}
table,
th,
tr td {
border: 1px solid black;
}
th,
td {
padding: 3px 20px;
}
table {
margin: auto;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
Click on header to sort in
ascending and descending
</h3>
<table id="table">
<tr>
<!--Calls sortTable function(0 for
country and 1 for capital) when
headers are clicked-->
<th onclick="sortTable(0)">Country</th>
<th onclick="sortTable(1)">Capital</th>
</tr>
<tr>
<td>United states of America</td>
<td>Washington DC</td>
</tr>
<tr>
<td>India</td>
<td>New Delhi</td>
</tr>
<tr>
<td>Australia</td>
<td>Canberra</td>
</tr>
<tr>
<td>Germany</td>
<td>Berlin</td>
</tr>
</table>
<script>
// JavaScript program to illustrate
// Table sort for both columns and
// both directions
function sortTable(n) {
let table;
table = document.getElementById("table");
var rows, i, x, y, count = 0;
var switching = true;
// Order is set as ascending
var direction = "ascending";
// Run loop until no switching is needed
while (switching) {
switching = false;
var rows = table.rows;
//Loop to go through all rows
for (i = 1; i < (rows.length - 1); i++) {
var Switch = false;
// Fetch 2 elements that need to be compared
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
// Check the direction of order
if (direction == "ascending") {
// Check if 2 rows need to be switched
if (x.innerHTML.toLowerCase() >
y.innerHTML.toLowerCase()) {
// If yes, mark Switch as needed
// and break loop
Switch = true;
break;
}
} else if (direction == "descending") {
// Check direction
if (x.innerHTML.toLowerCase() <
y.innerHTML.toLowerCase()) {
// If yes, mark Switch as needed
// and break loop
Switch = true;
break;
}
}
}
if (Switch) {
// Function to switch rows and mark
// switch as completed
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
// Increase count for each switch
count++;
} else {
// Run while loop again for descending order
if (count == 0 && direction == "ascending") {
direction = "descending";
switching = true;
}
}
}
}
</script>
</body>
</html>
输出：
