使用JavaScript对HTML表进行排序 [英] Sorting HTML table with JavaScript

问题描述

我正在使用表格排序解决方案（在JavaScript中），但我似乎找不到合适的解决方案。我只需要按字母顺序对每列进行排序。它不需要忽略任何代码或任何数字或使用货币。只需单击列标题，即可从排序的a-z / z-a中切换它。

I'm after a table sorting solution (in JavaScript) but I can't seem to find a suitable one yet. I just need it to sort each column alphabetically. It doesn't need to ignore any code or any numbers or to work with currency. Just a click on the column header switches it from sorted a-z/z-a.

有没有人知道这样一个非常简单的解决方案？

Does anyone know of a really simple solution like this?

推荐答案

只是重新访问一个旧解决方案，我想我会对它进行改版。 〜5周年纪念日！

Just revisiting an old solution, I thought I'd give it a facelift for it's ~5 year anniversary!

• 普通Javascript（ES6）


• alpha和数字排序 - 升序


• 适用于 Chrome ， Firefox ， Safari （以及 IE11 ，见下文）

• Plain Javascript (ES6)
• Does alpha and numeric sorting - ascending and descending
• Works in Chrome, Firefox, Safari (and IE11, see below)

1. 在所有标题（ th ）单元格中添加点击事件...
   
   

1. add a click event to all header (th) cells...

1. 当前表，查找所有行（第一行除外）...


2. 根据单击列的值对行进行排序...


3. 按新顺序将行插回到表中。

1. for the current table, find all rows (except the first)...
2. sort the rows, based on the value of the clicked column...
3. insert the rows back into the table, in the new order.

const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;

const comparer = (idx, asc) => (a, b) => ((v1, v2) => 
    v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
    )(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, 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) );
})));

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}

<table>
    <tr><th>Country</th><th>Date</th><th>Size</th></tr>
    <tr><td>France</td><td>2001-01-01</td><td><i>25</i></td></tr>
    <tr><td><a href=#>spain</a></td><td><i>2005-05-05</i></td><td></td></tr>
    <tr><td><b>Lebanon</b></td><td><a href=#>2002-02-02</a></td><td><b>-17</b></td></tr>
    <tr><td><i>Argentina</i></td><td>2005-04-04</td><td><a href=#>100</a></td></tr>
    <tr><td>USA</td><td></td><td>-6</td></tr>
</table>

如果你想支持IE11，你需要抛弃ES6语法并为 Array.from ， Array.forEach 和 元素.closest 。

If you want to support IE11, you'll need to ditch the ES6 syntax and add polyfills for Array.from, Array.forEach and Element.closest.

var getCellValue = function(tr, idx){ return tr.children[idx].innerText || tr.children[idx].textContent; }

var comparer = function(idx, asc) { return function(a, b) { return function(v1, v2) {
        return v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2);
    }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
}};

// do the work...
Array.from(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
        var 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(function(tr) { table.appendChild(tr) });
    })
});

这篇关于使用JavaScript对HTML表进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！