数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 JavaScript 对表格中的行进行排序？
我们不能使用 JavaScript 内置的 sort() 方法根据特定列对表格行进行排序。因此，我们需要创建自定义算法来对表格行进行排序。在本教程中，我们将学习如何使用 JavaScript 对表格和行进行排序。
在这里，我们将了解对表格行进行升序和降序排序的不同示例。
语法
用户可以按照以下语法使用 JavaScript 对表格中的行进行排序。
var switchContinue = true; while (switchContinue) { switchContinue = false; var allRows = table.rows; for ( Iterate through all rows ) { if (first.innerHTML > second.innerHTML) { allRows[i].parentNode.insertBefore(allRows[i + 1], allRows[i]); switchContinue = true; break; } } }
步骤
按照以下步骤使用 JavaScript 对表格中的行进行排序：
步骤 1 − 创建一个 switchContinue 变量并初始化为 true 值，该变量跟踪表格行是否需要进一步交换。
步骤 2 − 使用 while 循环，并进行迭代，直到 switchContinue 变量的值为 true。
步骤 3 − 在 while 循环中，将 switchContinue 变量赋值为 false，假设不再需要任何交换。
步骤 4 − 使用 rows 属性获取表格的所有行。
步骤 4.1 − 获取两行的特定列，并将它们分别存储在 first 和 second 变量中。
步骤 5 − 获取列的 innerHTML 并进行比较。如果根据两个值的比较结果需要交换，则交换这两行。
步骤 6 − 将 true 值赋给 switchContinue 变量。因为我们已经交换了两行，所以我们需要检查是否还有其他行需要交换。之后，使用 break 关键字中断 for 循环。
步骤 7 − 如果 switchContinue 变量的值在 for 循环的每次迭代中都保持为 false，则数组已排序，并且不再需要 while 循环的进一步迭代。
示例
在下面的示例中，我们创建了一个包含两列（名为 name 和 salary）的表格。此外，我们还在表格中添加了五行，每行具有不同的列值。
在 JavaScript 部分，我们实现了上述算法，以根据 salary 值的升序对表格行进行排序。用户可以看到我们如何访问两行的第二列，以及如何使用 parseInt() 方法将 salary 值转换为数字。之后，我们比较了 salary 值并更改了表格中行的顺序。
<html>
<body>
<h2>Sorting the <i>table rows in ascending order</i> in JavaScript.</h2>
<table id = "sort_table">
<tr>
<th> Name </th>
<th> Salary </th>
</tr>
<tr>
<td> Person 1 </td>
<td> 40000 </td>
</tr>
<tr>
<td> Person 2 </td>
<td> 30000 </td>
</tr>
<tr>
<td> Person 3 </td>
<td> 20000 </td>
</tr>
<tr>
<td> Person 4 </td>
<td> 50000 </td>
</tr>
<tr>
<td> Person 5 </td>
<td> 10000 </td>
</tr>
</table>
<button id = "btn"> Sort Table according to salary </button>
<script>
let output = document.getElementById('output');
function sortTableRows() {
let table = document.getElementById("sort_table");
var switchContinue = true;
// continue switching rows until all rows of the table are not sorted
while (switchContinue) {
switchContinue = false;
var allRows = table.rows;
let i;
// iterate through all rows and check if the switch requires
for (i = 1; i < (allRows.length - 1); i++)
{
var switchRow = false;
// get two rows of the table
let first = allRows[i].getElementsByTagName("TD")[1];
let second = allRows[i + 1].getElementsByTagName("TD")[1];
// if the salary in the first row is greater than the second row, we require to switch row
if (parseInt(first.innerHTML) > parseInt(second.innerHTML)) {
switchRow = true;
break;
}
}
// switch the row, if required
if (switchRow) {
allRows[i].parentNode.insertBefore(allRows[i + 1], allRows[i]);
// check further if any switch requires
switchContinue = true;
}
}
}
let button = document.getElementById('btn');
button.addEventListener('click', () => { sortTableRows() })
</script>
</body>
</html>
示例
在下面的示例中，表格包含用户的姓名和年龄。我们已根据用户的姓名（降序）对所有表格行进行了排序。我们使用了 toLowerCase() 方法将姓名值转换为小写并进行比较。
由于我们需要对表格行进行降序排序，因此我们使用了小于运算符来比较两行的列值。
<html>
<body>
<h2>Sorting the <i>table rows in descending order</i> in JavaScript</h2>
<table id = "sort_table">
<tr>
<th> Name </th>
<th> Age </th>
</tr>
<tr>
<td> John </td>
<td> 23 </td>
</tr>
<tr>
<td> Akshay </td>
<td> 30 </td>
</tr>
<tr>
<td> Alice </td>
<td> 32 </td>
</tr>
<tr>
<td> Bob </td>
<td> 12 </td>
</tr>
<tr>
<td> Shubham </td>
<td> 22 </td>
</tr>
</table>
<button id = "btn"> Sort Table according to Names </button>
<script>
let output = document.getElementById('output');
function sortTableRows() {
let table = document.getElementById("sort_table");
var switchContinue = true;
while (switchContinue) {
switchContinue = false;
var allRows = table.rows;
let i;
for (i = 1; i < (allRows.length - 1); i++) {
var switchRow = false;
let first = allRows[i].getElementsByTagName("TD")[0];
let second = allRows[i + 1].getElementsByTagName("TD")[0];
if (first.innerHTML.toLowerCase() <second.innerHTML.toLowerCase()) {
switchRow = true;
break;
}
}
if (switchRow) {
allRows[i].parentNode.insertBefore(allRows[i + 1], allRows[i]);
switchContinue = true;
}
}
}
let button = document.getElementById('btn');
button.addEventListener('click', () => { sortTableRows() })
</script>
</body>
</html>
用户学习了如何根据特定列值对表格进行排序。在第一个示例中，我们学习了如何对行进行升序排序，在第二个示例中，我们学习了如何对行进行降序排序。
此外，我们还可以根据多个表格列对表格行进行排序。我们需要更改 if 语句的条件以根据多个列值对行进行排序。
2K+ 浏览量
