カテゴリー
JavaScript

同じclass場合rowspanで列を結合するjQuery

テーブルの列で、同じclassの番号の場合、rowspanで結合するjQuery。配列に入れたcate-xxをfindして、番号込で同じ数値の時は結合する。

こちらのサイトを参考にしました。ありがとうございます。
http://study-upup.blogspot.com/2014/03/jqueryjquery.html

<table id="testTable-1">

<tr>
<td class="cate01-894">test</td>
<td class="cate02-894">user</td>
<td class="cate03-894">test</td>
<td class="cate04-894">完了</td>
</tr>

<tr>
<td class="cate01-894">test</td>
<td class="cate02-894">user</td>
<td class="cate03-894">test</td>
<td class="cate04-894">完了</td>
</tr>

</table>

<script>
var arr = ['cate01','cate02','cate03','cate04'];
var num = 0;
$.each(arr, function(i, value){
var cate = arr[num];
$(document).ready(function(){
$('#testTable-1').each(function () {
var pre_element = null;
var col_num = 0;
$(this).find('tr').each(function () {
var now_td = $(this).find('td[class^='+cate+']').eq( col_num );
if (pre_element == null) {
pre_element = now_td;
} else if (now_td.attr('class') == pre_element.attr('class')) {
now_td.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_td;
}
});
});
});
num++;
})
</script>

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です