제이쿼리 테이블 병합하는 방법 질문
본문
안녕하세요 일단 밑에 테이블 처럼 동적으로 테이블 병합하려고 하는데요 구글링해도 제대로 안되서..
방법 좀 알려줄수있나요..
이런식으로 유동적으로 버튼 클릭하면 테이블이 늘어나면 왼쪽 병합한건 그대로 있으면 되요
소스는 이건데요 어떤게 문제일까요 ㅠㅠ
$(document).on('click','#createRows',function () { var first = true; var prevRowspan1 = 1; var prevCell1 = null; var rows = $("#optiontbl > tbody").children(); for (var i = 0; i < rows.length; i++ ) { if (first) { prevRow = rows[i]; prevCell1 = $(prevRow).find("td").eq(0); console.log(prevCell1); first = false; continue; } var row = rows[i]; var tdList = $(row).find("td"); prevRowspan1++; $(prevCell1).attr("rowspan", prevRowspan1); $(tdList).eq(0).remove(); } });
답변 1
<script type="text/javascript">
<!--
jQuery(document).ready(function(){
jQuery(".addbtn").on("click", function(){
var lastRow=jQuery(".test tr").last();
if(jQuery(".test tr").length==1){
jQuery(".test tr").clone().insertAfter(lastRow);
jQuery(".test td").last().remove();
jQuery(".test td").first().attr("rowspan", 2);
jQuery(".test tr:last-child td").html("");
}
else{
lastRow.clone().insertAfter(lastRow);
jQuery(".test tr:last-child td").html("");
jQuery(".test td").first().attr("rowspan", jQuery(".test tr").length);
}
});
});
//-->
</script>
<button class="addbtn">추가</button>
<style>
.test td{width:100px;height:30px;border:1px solid #ccc;}
</style>
<table class="test">
<tr>
<td>ss</td>
<td>ss</td>
<td>sss</td>
<td>ss</td>
</tr>
</table>
