极客教程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变量并初始化为真值，它可以跟踪表格中的行是否需要进一步切换。
第2步 - 使用while循环，并进行迭代，直到switchContinue变量的值为真。
第3 步–在while循环中，通过假设不需要进一步的切换，将false赋给switchContinue变量。
第4步 --使用rows属性获取表格的所有行。
第4.1 步–获取两行的特定列，并将其分别存储在第一和第二变量中。
第 5步 --获取列的innerHTML并进行比较。如果切换需要基于两个值的比较结果，则切换两个行。
第6步 --给switchContinue变量分配一个真值。由于我们已经切换了两行，我们需要检查是否有其他行需要切换。之后，使用break关键字中断for循环。
第7步 - 如果switchContinue变量的值在for循环的每一次迭代中都是假的，那么数组就被排序了，并且不需要再进行while循环的迭代。
例子
在下面的例子中，我们已经创建了一个有两列名字的表，分别是姓名和工资。此外，我们还在表中添加了五条具有不同列值的行。
在JavaScript部分，我们实现了上述算法，根据升序或工资值对表内的行进行排序。用户可以看到我们如何访问两行的第二列，并使用parseInt()方法将工资值转换成数字。之后，我们比较了工资值，并改变了表格中的行的顺序。
<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语句的条件，以便根据多列值对行进行排序。