使用 JavaScript 对 HTML 表格进行排序

╰半夏微凉° 2023-09-30 12:08 19阅读 0赞

我们经常遇到希望使表格具有交互性的情况。我们可能只想通过单击列或任何其他方法对它们进行排序。HTML 没有任何编程能力，因此我们必须使用 JavaScript 对 HTML 表格进行排序。不幸的是，没有内置的方法可以帮助我们对数组进行排序。因此，我们编写了利用 DOM 操作功能和比较功能的自定义方法。本教程教授如何使用 JavaScript 对 HTML 表格进行排序。

用户定义的方法使用以下两个辅助函数对数组进行排序。

*  `getCellValue()`

一个从给定表格行和列索引的单元格中获取内容的函数。

我们使用表格行的 children 属性来选择`ith`使用的列`tr.children[i]`，然后使用它的`innerText`or`textContent`属性来获取存储的实际内容。一旦我们获得单元格中的实际内容，我们就可以使用自定义比较器来比较和排序这些值。

*  `comparer()`

比较给定表中两个元素的值的函数。

我们首先使用`getCellValue()`具有指定行和列索引的函数获取单元格的内容。然后我们检查两者都是有效的整数还是字符串，然后比较它们以找到正确的顺序。

#### [算法][Link 1] ####

*  [通过向表中添加事件侦听器，使表中的所有标题都可点击。][Link 2]
 *  [查找所选列中除第一行之外的所有行。][Link 3]
 *  [使用 JavaScript 的sort()函数comparer()对元素进行排序。][JavaScript _sort_comparer]
 *  [将已排序的行重新插入表中，以获得最终的排序表作为输出。][Link 4]

#### [代码][Link 5] ####

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) );
    })));

所有主流浏览器都支持上面讨论的所有方法。

[Link 1]: https://www.delftstack.com/howto/javascript/javascript-sort-html-table/#algorithm
[Link 2]: https://www.delftstack.com/howto/javascript/javascript-sort-html-table/#make-all-the-headers-in-the-table-clickable-by-adding-an-event-listener-to-them
[Link 3]: https://www.delftstack.com/howto/javascript/javascript-sort-html-table/#find-all-the-rows-in-the-selected-column-except-the-first-row
[JavaScript _sort_comparer]: https://www.delftstack.com/howto/javascript/javascript-sort-html-table/#use-javascript-s-sort-function-with-the-comparer-to-sort-the-elements
[Link 4]: https://www.delftstack.com/howto/javascript/javascript-sort-html-table/#insert-the-sorted-rows-back-in-the-table-to-get-the-final-sorted-table-as-output
[Link 5]: https://www.delftstack.com/howto/javascript/javascript-sort-html-table/#code