使用JavaScript对HTML表格进行排序

Question

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

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

Answer 1

• 纯Javascript（ES6）
• 进行字母和数字排序-升序和降序
• 可在 Chrome ， Firefox ， Safari （和 IE11 ，请参见下文）中使用

快速说明

1. click向所有标头（th）单元添加事件…
   1. 对于当前table，找到所有行（第一行除外）…
   2. 根据点击列的值对行进行排序…
   3. 按新顺序将行插入表中。

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）

如果你想支持IE11，你需要沟ES6语法和使用替代品Array.from和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.prototype.slice.call(document.querySelectorAll('th')).forEach(function(th) { th.addEventListener('click', function() {
        var table = th.parentNode
        while(table.tagName.toUpperCase() != 'TABLE') table = table.parentNode;
        Array.prototype.slice.call(table.querySelectorAll('tr:nth-child(n+2)'))
            .sort(comparer(Array.prototype.slice.call(th.parentNode.children).indexOf(th), this.asc = !this.asc))
            .forEach(function(tr) { table.appendChild(tr) });
    })
});