JavaScript 排序 HTML 表格
我們經常遇到希望使表格具有互動性的情況。我們可能只想通過單擊列或任何其他方法來對它們進行排序。HTML 沒有任何程式設計能力，因此我們必須使用 JavaScript 對 HTML 表進行排序。不幸的是，沒有內建的方法可以幫助我們對陣列進行排序。因此，我們編寫了利用 DOM 操作功能和比較功能的自定義方法。本教程教授如何使用 JavaScript 對 HTML 表進行排序。
使用 JavaScript 對 HTML 表格進行排序
使用者定義的方法使用以下兩個輔助函式對陣列進行排序。
getCellValue()
一個函式，用於從給定表格行和列索引的單元格中獲取內容。
我們使用表格行的 children 屬性通過 tr.children[i] 選擇第 i 列，然後使用其 innerText 或 textContent 屬性來獲取儲存的實際內容。一旦我們獲得了單元格中的實際內容，我們就可以使用自定義比較器對這些值進行比較和排序。
comparer()
用於比較給定表中兩個元素的值的函式。
我們首先使用具有指定行和列索引的 getCellValue() 函式獲取單元格的內容。然後我們檢查兩者是否都是有效的整數或字串，然後比較它們以找到正確的順序。
演算法
-
通過向表中新增事件偵聽器來使表中的所有標題都可點選。
-
查詢所選列中除第一行之外的所有行。
-
使用 JavaScript 的
sort()函式和comparer()對元素進行排序。 -
將排序後的行插入回表中以獲取最終排序表作為輸出。
程式碼
const getCellValue = (tableRow, columnIndex) =>
tableRow.children[columnIndex].innerText ||
tableRow.children[columnIndex].textContent;
const comparer = (idx, asc) => (r1, r2) =>
((el1, el2) => el1 !== '' && el2 !== '' && !isNaN(el1) && !isNaN(el2) ?
el1 - el2 :
el1.toString().localeCompare(el2))(
getCellValue(asc ? r1 : r2, idx), getCellValue(asc ? r2 : r1, idx));
// do the work...
document.querySelectorAll('th').forEach(
th => th.addEventListener(
'click', (() => {
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(
Array.from(th.parentNode.children).indexOf(th),
this.asc = !this.asc))
.forEach(tr => table.appendChild(tr));
})));
所有主要瀏覽器都支援上面討論的所有方法。
Harshit Jindal has done his Bachelors in Computer Science Engineering(2021) from DTU. He has always been a problem solver and now turned that into his profession. Currently working at M365 Cloud Security team(Torus) on Cloud Security Services and Datacenter Buildout Automation.
LinkedIn