テーブルの縦列で同じデータがあった場合、結合(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; } }); }); });縦列の結合のサンプルでした。
サンプルページはこちら
0 コメント:
コメントを投稿