메뉴 건너뛰기

조회 수 1211 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

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


이 예제에서 꽤 많은 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> 


List of Articles
번호 제목 날짜 조회 수
» jQuery로 테이블 tr 동적으로 추가,삭제 하기 v2 2019.01.10 1211
98 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2019.01.10 1081
97 jQuery 로 원하는 갯수만큼 checkbox 선택하기 2019.01.10 1019
96 jQuery 로 탭메뉴 보였다 안보였다 맹글기 2019.01.10 1327
95 jQuery 로 탭메뉴 2019.01.10 938
94 스크롤 최하단 자동 포커스(auto scroll to bottom of page with jquery) 2018.11.07 1571
93 jquery timer, javascript countdown (타이머 예제) 2018.11.07 81315
92 Hide pager if bxslider has only 1 slide 2018.11.07 1294
91 Magnific popup conflict with "jquery.nicescroll" file 2018.11.07 1314
90 터치 디바이스 분기처리 2018.11.07 1273
89 중복 없는 랜덤 2018.11.07 2016
88 3D Perspective Carousel with jQuery and CSS3 - CSSSlider 2018.11.07 1388
87 iframe height auto resize 2018.11.07 1400
86 getElementsByClassName 을 IE8 이하에서 동작하게 하는 코드 2018.11.07 1297
85 비활성화 된 라디오버튼 클릭 시 경고창 생성 2018.11.07 1392
84 특정영역 제외하고 body 클릭 2018.09.28 3605
83 따욤표 중복으로 출력하기 2018.09.28 1884
82 [jQuery] 셀렉트박스에서 특정 옵션 선택시 레이어 나타내기 2018.09.27 2551
81 [jQuery] split, join 으로 공백제거 하기 2018.09.06 2146
80 [jQuery] input 박스에 maxlength 만큼 입력했을 때 자동으로 다음 박스로 이동하기 2018.09.06 1813
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved