JQuery input 추가 삭제 - jQuery input chuga sagje

Question

jQuery 를 통해 자동 행 추가 및 삭제를 해주는 부분입니다.

Dynamically add and remove elements with jQuery

<!DOCTYPE html>
<html>    
    <head>        
    <meta charset="UTF-8">        
    <title>Add More Elements</title>        
    <script src="jquery-1.7.1.min.js"></script>        
    <script>            
        $(document).ready (function () {                
            $('.btnAdd').click (function () {                                        
                $('.buttons').append (                        
                    '<input type="text" name="txt"> <input type="button" class="btnRemove" value="Remove"><br>'                    
                ); // end append                            
                $('.btnRemove').on('click', function () { 
                    $(this).prev().remove (); // remove the textbox
                    $(this).next ().remove (); // remove the <br>
                    $(this).remove (); // remove the button
                });
            }); // end click                                            
        }); // end ready        
    </script>    
    </head>    
    <body>        
        <div class="buttons">            
        <input type="text" name="txt"> <input type="button" class="btnAdd" value="Add"><br>        
        </div>    
    </body>
</html>

Input type의 동적할당에 대해 고민을 해보았다.

Javascript 로 동적 생성하여 innerHTML로 짤수도 있는데, 너무 복잡한다.

답은 역시 JQuery. JQuery를 이용하면 간단하게 구현이 가능하다

다음과 같은 표가 있다치면 +를 누르면 5개 input이 추가되고 -를 누르면 -차감된다.

먼저 기존 Table값에 id를 할당해주고, +,-에 버튼 이벤트를 넣는다.

테이블의 마지막에 tr을 추가한다. input은 name을 배열로 선언하여 넘긴다.

여담이지만, 같은 이름을 가지고 배열로 넘어간 값은

<?php $st_num=$_REQUEST['st_num']; $st_name=$_REQUEST['st_name']; for($i=0;$i<count($st_num);$i++) { $st_num_val=$st_num[$i]; $st_name_val=$st_name[$i]; } ?>

이렇게 간단하게 받아 올수 있다.

마지막으로 -함수를 구현한다.

추가했던마지막 -5를 다시 삭제한다.

if문을 두어 최초갯수가 삭제되지않도록 한다.

간단한 JQuery로 항목 추가,제거 하기! 끗!

저작자표시 비영리

'study' 카테고리의 다른 글

JQuery Select Box 제어 (0)	2019.05.24
jqurey on 이벤트에 액션 (0)	2017.02.05
php 게시판 리스트 (0)	2017.01.21
PHP $_SERVER['PHP_SELF'] 취약점 (0)	2017.01.21
substr사용법 (0)	2017.01.21