자바스크립트/Javascript 참고자료

jQuery 테이블 셀병합 (rowspan)

Rust Choi 2019. 11. 19. 11:33

tr마다 동일 데이터 값이 있을 경우 아래, 위 셀병합. 

<tr class="link dataRow" >
	<td class="t1">홍길동</td>
	<td class="t2">테스트</td>
	<td class="t3">테스트2</td>
	<td class="t4">테스트3</td>
	<td class="t5_abcd_01">5</td>
	<td class="t6_abcd_02">3</td>
</tr>
$(document).ready(function(){
	genRowspan("t1");
	genRowspan("t2");
	genRowspanT5T6("t3_");
	genRowspanT5T6("t4_");
	genRowspanT5T6("t5_");
	genRowspanT5T6("t6_");
});

function genRowspan(className){
	$("."+className).each(function(){
		var rows = $("."+className+":contains('"+$(this).text()+"')");
		if(rows.length > 1){
			rows.eq(0).attr("rowspan", rows.length);//중복되는 첫번째 td에 rowspan값 세팅
			rows.not(":eq(0)").remove();//중복되는 td를 삭제
		}
	});
}

function genRowspanT5T6(preClassName){
	var rows = $("td[class^="+preClassName+"]");
	
	rows.each(function(index, item){
		var csName = $(item).attr("class");
		var dupRows = $("."+csName);
		
		if(dupRows.length > 1){
			dupRows.eq(0).attr("rowspan", dupRows.length); //중복되는 첫번째 td에 rowspan값 세팅
			dupRows.not(":eq(0)").remove(); //중복되는 td를 삭제
		}
	})
}

https://zero-gravity.tistory.com/311여기를 참조함.

 

[jQuery] 유동적인 테이블 셀병합 - rowspan

위와 같이 소속에 같은 데이터가 있을 경우 하나의 셀로 병합해주는 코드다. $(document).ready(function(e){ genRowspan("td 클래스명"); }); function genRowspan(className){ $("." + className).each(functio..

zero-gravity.tistory.com