테스트 사이트 - 개발 중인 베타 버전입니다

제이쿼리 테이블 병합하는 방법 질문 채택완료

릴보이즈 7년 전 조회 1,833

안녕하세요 일단 밑에 테이블 처럼 동적으로 테이블 병합하려고 하는데요 구글링해도 제대로 안되서.. 

방법 좀 알려줄수있나요..

 

 

이런식으로 유동적으로 버튼 클릭하면 테이블이 늘어나면 왼쪽 병합한건 그대로 있으면 되요

소스는 이건데요 어떤게 문제일까요 ㅠㅠ

 

$(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개

채택된 답변
+20 포인트
o
7년 전

<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>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인