[JQUERY] 동적 table의 rowspan 병합

 

동적으로 생성되는 테이블에서 같은 값의 rowspan을 합겨줘야 하는 경우가 발생해

찾아보고 정리해둔다!

 

- HTML

<table border="1">
	<colgroup>
		<col width="100px">
		<col width="100px">
		<col width="300">
		<col width="100px">
	</colgroup>
	<thead>
		<tr>
			<th>나이</th>
			<th>이름</th>
			<th>과목</th>
			<th>합격여부</th>
		</tr>
	</thead>
	<tbody class="testTbody">
		<tr>
			<td class="twenty">20대</td>
			<td class="tester1">테스터</td>
			<td>정보처리기사 실기</td>
			<td class="pass1">합격</td>
		</tr>
		<tr>
			<td class="twenty">20대</td>
			<td class="tester1">테스터</td>
			<td>정보처리기사 필기</td>
			<td class="fail1">불합격</td>
		</tr>
		<tr>
			<td class="twenty">20대</td>
			<td class="tester2">박스터</td>
			<td>정보처리기사 필기</td>
			<td class="fail2">불합격</td>
		</tr>
		<tr>
			<td class="thirty">30대</td>
			<td class="tester3">노스터</td>
			<td>정보처리산업기사 필기</td>
			<td class="pass3">합격</td>
		</tr>
		<tr>
			<td class="thirty">30대</td>
			<td class="tester3">노스터</td>
			<td>정보처리산업기사 실기</td>
			<td class="pass3">합격</td>
		</tr>
		<tr>
			<td class="thirty">30대</td>
			<td class="tester3">노스터</td>
			<td>정보처리기사 필기</td>
			<td class="pass3">합격</td>
		</tr>
		<tr>
			<td class="thirty">30대</td>
			<td class="tester3">노스터</td>
			<td>정보처리기사 실기</td>
			<td class="fail3">불합격</td>
		</tr>
		<tr>
			<td class="forty">40대</td>
			<td class="tester4">태스터</td>
			<td>정보처리기사 필기</td>
			<td class="pass4">합격</td>
		</tr>
		<tr>
			<td class="forty">40대</td>
			<td class="tester4">태스터</td>
			<td>정보처리기사 실기</td>
			<td class="pass4">합격</td>
		</tr>
	</tbody>
</table>

 

- SCRIPT

/* rowspan function */
$.fn.mergeClassRowspan = function (colIdx) {
    return this.each(function () {
        var that;
        $('tr', this).each(function (row) {
            $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {

                if ($(this).attr('class') == $(that).attr('class')) {
                    rowspan = $(that).attr("rowspan") || 1;
                    rowspan = Number(rowspan) + 1;

                    $(that).attr("rowspan", rowspan);

                    $(this).hide();

                } else {
                    that = this;
                }

                that = (that == null) ? this : that;
            });
        });
    });
};

/* 사용 */
$(function(){
    $('.testTbody').mergeClassRowspan(0);
    $('.testTbody').mergeClassRowspan(1);
    $('.testTbody').mergeClassRowspan(3);
});

 

 

- function 사용 전, 후

사용전(왼쪽), 사용후(오른쪽)