ふたりで

jsp table merge row span by class 본문

javascript

jsp table merge row span by class

graykang 2022. 8. 22. 10:29
728x90
반응형
SMALL

jstl을 사용 하여 html table을 만들경우 세로 방향으로 같은 항목들을 병합 해주어야 할경우 

아래와 같은 스크립트로 해결 할 수 있다.

  
/* 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(){
  $('table tbody').mergeClassRowspan(1);//두번째 td 제로베이스
  $('table tbody').mergeClassRowspan(2);//세번째 td
});

그리고 병합이 필요한 각 td테그에 동일한 값으로 class 를 설정 해주면 된다.

<table>
	<tbody>
    	<tr>
        	<td></td>
        	<td class="${list.b}"></td>
        	<td class="${list.b}"></td>
        	<td></td>
        </tr>
    </tbody>
</table>
728x90
반응형
LIST
Comments