jquery - jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

저번에 맹글었던거에서 옵션을 추가하는 기능을 추가해보았다.

이 예제에서 꽤 많은 jQuery 셀렉터와 함수들을 사용한것 같은데 소스를 이해해 보면서 jQuery 사용법을 살살 익혀봐도 좋을것 같다.

만들어질 것은 다음과 같다. (직접 클릭해 보기바람)

옵션명	항목명	필수항목	가격	재고	옵션추가

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
     
    <script type="text/javascript">
        $(document).ready(function(){
            // 옵션추가 버튼 클릭시
            $("#addItemBtn").click(function(){
                // item 의 최대번호 구하기
                var lastItemNo = $("#example tr:last").attr("class").replace("item", "");
 
                var newitem = $("#example tr:eq(1)").clone();
                newitem.removeClass();
                newitem.find("td:eq(0)").attr("rowspan", "1");
                newitem.addClass("item"+(parseInt(lastItemNo)+1));
 
                $("#example").append(newitem);
            });
 
 
            // 항목추가 버튼 클릭시
            $(".addBtn").live("click", function(){
                var clickedRow = $(this).parent().parent();
                var cls = clickedRow.attr("class");
 
                // tr 복사해서 마지막에 추가
                var newrow = clickedRow.clone();
                newrow.find("td:eq(0)").remove();
                newrow.insertAfter($("#example ."+cls+":last"));
 
                // rowspan 조정
                resizeRowspan(cls);
            });
             
             
            // 삭제버튼 클릭시
            $(".delBtn").live("click", function(){
                var clickedRow = $(this).parent().parent();
                var cls = clickedRow.attr("class");
                 
                // 각 항목의 첫번째 row를 삭제한 경우 다음 row에 td 하나를 추가해 준다.
                if( clickedRow.find("td:eq(0)").attr("rowspan") ){
                    if( clickedRow.next().hasClass(cls) ){
                        clickedRow.next().prepend(clickedRow.find("td:eq(0)"));
                    }
                }
 
                clickedRow.remove();
 
                // rowspan 조정
                resizeRowspan(cls);
            });
 
            // cls : rowspan 을 조정할 class ex) item1, item2, ...
            function resizeRowspan(cls){
                var rowspan = $("."+cls).length;
                $("."+cls+":first td:eq(0)").attr("rowspan", rowspan);
            }
        });
    </script>
</head>
 
<body>
<button id="addItemBtn">옵션추가</button>
<table id="example" border="1px">
        <tr>
            <th>옵션명</th>
            <th>항목명</th>
            <th>필수항목</th>
            <th>가격</th>
            <th>재고</th>
            <th>옵션추가</th>
        </tr>
        <tr class="item1">
            <td><input type="text" /><button class="addBtn">항목추가</button></td>
            <td><input type="text" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><button class="delBtn">삭제</button></td>
        </tr>
        <tr class="item2">
            <td><input type="text" /><button class="addBtn">항목추가</button></td>
            <td><input type="text" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><button class="delBtn">삭제</button></td>
        </tr>
        <tr class="item3">
            <td><input type="text" /><button class="addBtn">항목추가</button></td>
            <td><input type="text" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><button class="delBtn">삭제</button></td>
        </tr>
        <tr class="item4">
            <td><input type="text" /><button class="addBtn">항목추가</button></td>
            <td><input type="text" /></td>
            <td><input type="checkbox" /></td>
            <td><input type="text" /></td>
            <td><input type="text" /></td>
            <td><button class="delBtn">삭제</button></td>
        </tr>
</table>
</body>
</html>

jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2

단축키

Articles