資料結構
網路
關係資料庫管理系統
作業系統
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+ 瀏覽量
