【jquery】jqueryを使ってテーブルの縦列を結合する

テーブルの縦列で同じデータがあった場合、結合(rowspan)するサンプルです。
同じデータは順番に並んでいる必要があり、このサンプルは一番左の縦列のみ結合します。

今回は縦バージョンですが、横バージョンもいずれ。。。

HTMLのサンプル

関東
東京


関東
千葉


関東
神奈川


近畿
大阪


近畿
兵庫


近畿
京都

上記のようなテーブルがあり、一番左の列で同じデータ（関東、近畿）を結合したいとき。

jqueryのサンプル

 $(document).ready(function(){
  $('#testTable').each(function () {
   var pre_element = null;
   var col_num = 0;
   $(this).find('tr').each(function () {
    var now_th = $(this).find('th').eq( col_num );
    if (pre_element == null) {
     pre_element = now_th;
    } else if (now_th.text() == pre_element.text()) {
     now_th.remove();
     if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1);
      pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1);
     } else {
      pre_element = now_th;
     }
   });
  });
 });

縦列の結合のサンプルでした。

サンプルページはこちら