[解決済み] JavaScriptでHTMLテーブルをソートする

質問

私は（JavaScriptで）テーブルのソートソリューションを探していますが、まだ適切なものを見つけることができないようです。私はちょうどそれが各列をアルファベット順に並べ替える必要があります。それはどんなコードも数字も無視する必要はありませんし、通貨で動作する必要もありません。列のヘッダーをクリックするだけで、a-z/z-aのソートから切り替わります。

どなたか、このような本当に簡単な解決策をご存じないでしょうか？

どのように解決するのですか？

再訪問 昔の解決策 5周年を記念してリニューアルしました。

• プレーンなジャバスクリプト(ES6)
• アルファベットと数字のソート（昇順・降順）が可能
• で動作します。 クローム , ファイアフォックス , サファリ (そして IE11 下記参照)

簡単な説明

1. を追加します。 click イベントをすべてのヘッダー ( th ) のセル...
2. 現在の table 最初の行を除くすべての行を検索します。
3. クリックした列の値に基づいて、行をソートする...
4. 新しい順序でテーブルに行を挿入します。

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

コンパレータ機能内訳

簡潔にするために、私は comparer() 関数を使用します。少し複雑で読みにくいので、ここでもう一度分解/書式設定/コメントをしておきます。

// Returns a function responsible for sorting a specific column index 
// (idx = columnIndex, asc = ascending order?).
var comparer = function(idx, asc) { 

    // This is used by the array.sort() function...
    return function(a, b) { 

        // This is a transient function, that is called straight away. 
        // It allows passing in different order of args, based on 
        // the ascending/descending order.
        return function(v1, v2) {

            // sort based on a numeric or localeCompare, based on type...
            return (v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2)) 
                ? v1 - v2 
                : v1.toString().localeCompare(v2);
        }(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
    }
};