쓸만한 주저리

jQuery를 이용한 RowSpan 함수

봄돌73 2015. 8. 14. 22:54

//2015-08-14 오춘석 rowspan 함수

//입력변수 : id -> table id, n -> rowspan 적용할 행의 갯수

//table 설정 : table id 지정(입력 변수에 할당), rowspan 적용할 td에 rowspan_고유공통값_n 형식으로 class 지정 (n은 1~9. 10부터는 오류 가능성 있음)

//고유공통값은 합쳐야 하는 td들 사이에는 공통으로 쓰지만 다른 td와는 다른 고유값. 고유공통값 '가'와 '나'가 반복되어 사용되는 것은 무관.

//'가','가','나','나','가','가' 순으로 쓰이면 '가' 두 개, '나' 두 개, 다시 '가' 두 개가 합쳐진다.

//합치면 제일 처음 td만 남기고 나머지는 지움.

//td 안의 값이 같거나 다르거나 상관없이 지정된 class 기준으로 합침

function rowspan(id,n){

  var t=$('#'+id);

  for(var i=n+1;i--;){

    var tds=t.find('td[class^=rowspan_][class$=_'+i+']');

    var row_count=0;

    var td_class='';

    tds.each(function(index){

      if(td_class==$(this).prop('className')){

        row_count++;

      }

      else{

        if(td_class){

          $('td.'+td_class+':eq(0)').prop('rowspan',row_count);

          $('td.'+td_class+':gt(0)').remove();

        }


        row_count=1;

        td_class=$(this).prop('className');

      }

    });

    if(td_class){

      $('td.'+td_class+':eq(0)').prop('rowspan',row_count);

      $('td.'+td_class+':gt(0)').remove();

    }

  }

}



예시

<table id="rowspan_table">

<tr>

<td class="rowspan_table_1">1</td>

<td class="rowspan_table_2">2</td>

<td class="rowspan_table_3">3</td>

</tr>

<tr>

<td class="rowspan_table_1">1</td>

<td class="rowspan_table_2">2</td>

<td class="rowspan_table_3">3</td>

</tr>

<tr>

<td class="rowspan_td_1">1</td>

<td class="rowspan_td_2">2</td>

<td class="rowspan_td_3">3</td>

</tr>

</table>

<script>

rowspan('rowspan_table',3)

</script>


rowspan_table_1, rowspan_table_2, rowspan_table_3은 합쳐지고 rowspan_td_1, rowspan_td_2, rowspan_td_3은 남는다.