동적으로 셀 병합하기

HU·2021년 11월 29일
0

AJax에서 동적으로 테이블을 생성하다 셀(행)을 병합해야할 일이 생겨서 코드를 찾아보았다.

$(document).ready(function(e){
    mergeRowspan("td 클래스명");
});
 
 
function mergeRowspan(className){
    $("." + className).each(function() {
        var rows = $("." + className + ":contains('" + $(this).text() + "')");
        if (rows.length > 1) {
            rows.eq(0).attr("rowspan", rows.length);
            rows.not(":eq(0)").remove();
        }
    });
}
  1. className 이라는 클래스를 가진 tr만 골라서 해당 tr의 text 값을 가져온다.
  2. lnegth가 1보다 큰 tr들만 rowspan(행 병합)을 해야하기 때문에 조건문으로 걸러낸다.
  3. 1번에서 가져온 tr 리스트에서 첫 번째 tr에 rowspan을 해준다.(attr)
  4. 마지막으로 rowspan을 추가한 첫 번째 tr 이외의 tr들은 모두 지워준다.(remove)

자료 출처
[jQuery] 유동적인 테이블 셀병합 - rowspan
[JQuery]동적으로 Rowspan 하기

profile
지식 쌓기

0개의 댓글