1. ホーム
  2. jquery

[解決済み] jQueryテーブルソート

2022-03-01 02:24:41

質問

4列の非常にシンプルなHTMLテーブルがあります。

Facility Name, Phone #, City, Specialty

でソートできるようにしたい。 <強い 施設名 と <強い 都市名 だけです。

jQueryを使ってどのようにコーディングすればよいのでしょうか?

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

もし、すべてのベルやホイッスルを避けたいのであれば、次のことをお勧めします。 このシンプルな sortElements プラグイン . 使用方法。

var table = $('table');

$('.sortable th')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find('td').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                if( $.text([a]) == $.text([b]) )
                    return 0;

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

デモも (都市名と施設名をクリックするとソートされます)