[jQuery ] tableにある同じ内容のセルを自動的に結合したい

ループ処理で出力したカスタムフィールドの内容などを、tableにまとめて表形式で出力することがあります
内容が重複しているセルはrowspanでまとめたいところですが、まとめるセルの数を保持したり、結合されるセルを削除したりとループの中で処理するのは以外と大変です
更に「この列だけは重複セルがあってもそのまま表示したい」などの例外処理が入ってくるとやりきれません
そこで、ループ処理の中で結合処理をするのではなく、まずは重複を含めて素直にテーブルを出力してしまって、出来上がったテーブルに対してjQueryで整形をする方法を検討してみました

サンプルコード

CSS

.join_cell {
    visibility: hidden;
}

出力するtableタグに「join_cell」タグを設定します
テーブルをそのまま表示すると、一度表示されたテーブルにjQueryで結合処理が行われるため、少し見栄えが悪いです
そこで「visibility: hidden;」で一旦非表示にしておき、jQueryの結合処理が終わったときに再表示するようにしています

jQuery

jQuery(function($) {
    $(window).on('load', function() {
        var cell_num_by_line = $('.join_cell > tbody > tr:first-of-type > td').length;
        var cells = $('.join_cell td');
        for(var i = 0; i < cells.length; i++) {
            var join_count = 1;
            for(var row_index = i + cell_num_by_line; row_index < cells.length; row_index += cell_num_by_line) {
                if( cells.eq(row_index).hasClass('remove_cell') ) {
                    continue;
                }
                if( cells.eq(row_index).hasClass('not_join') ) {
                    continue;
                }
                if(cells.eq(i).text() == cells.eq(row_index).text()) {
                    join_count++;
                    cells.eq(i).attr('rowspan', join_count);
                    cells.eq(row_index).addClass('remove_cell');
                }
                else {
                    break;
                }
            }
        }
        $('.join_cell .remove_cell').remove();
        $('.join_cell').css('visibility', 'visible');
    });
});

「cell_num_by_line」変数に、テーブル一行あたりのセルの数を設定します
セルの数だけforループを回します。更にこのループの中で、このセルと同じ列のセルをチェックするためのforループを回しています
n番目のセルに、一行あたりのセルの数を足すことで、そのセルの一つ下のセルを特定します。そのセルの値がn番目のセルと同じであれば、「remove_cell」クラスを設定しておきます
この時点でセルを削除するとループ処理がずれてしまうので、この時点ではクラスの設定のみに留めます
結合したくないセルには、あらかじめ「not_join」クラスを設定しておきます。このクラスが設定されている場合は結合処理がスキップされます
最後に「remove_cell」クラスが設定されているセルをすべて削除し、非表示にしてたテーブル全体を再表示しています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。

[jQuery] tableにある同じ内容のセルを自動的に結合したい

サンプルコード

CSS

jQuery

ご質問など受け付けています