ミギムキ

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

サンプルコード

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」クラスが設定されているセルをすべて削除し、非表示にしてたテーブル全体を再表示しています