极客笔记如何使用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 - 将switchContinue变量赋值为true。由于我们已经交换了两行，需要检查是否有其他行需要交换。之后，使用break关键字中断for循环。
步骤7 - 如果在for循环的每次迭代中，switchContinue变量的值仍为false，则表示数组已排序，不需要进一步迭代while循环。
示例
在下面的示例中，我们创建了一个具有两列名为name和salary的表格。此外，我们在表格中添加了五行具有不同列值的数据。
在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 语句的条件，以根据多个列值排序行。