티스토리 뷰

Programming/JQUERY

JQUERY 테이블 행 추가 삭제 하기

Beat. 2016. 9. 3. 15:00
이전글에서는 자바스크립트를 이용해서 테이블 행을 동적으로 추가
삭제를 해봤는데요.

이번에는 JQUERY를 이용해서 테이블 행을 동적으로 추가 삭제를 해보겠습니다.

<body>안에 복사붙여넣기 하시면 됩니다.

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
//행개수
var count = 0;
//최대 행개수
var full_count = 5;
    $(function() {
     //처음에 켜지면 실행됨 onload
     $(window).load(function(){
      //추가 버튼 클릭이 자동으로 됨
      $('#add_btn').trigger('click');
     });
     //추가 버튼 클릭시
     $('#add_btn').click(function() {
      //행추가할때마다 행개수 +1
         ++count;
      
      //최대 행개수보다 크면 리턴
      if(count>full_count){
       alert("최대5개까지만 가능합니다.");
       return;
      }
      
            //행추가
            jQuery("#text_table").append('<tr id=tr'+count+'><td>'+count+'번 항목</td><td><input type=text name=text"+count+" id=text"+count+" size=40></td></tr>');
     });
       
     //삭제 버튼 클릭시
     $('#delete_btn').click(function() {
      //행이 하나밖에 없으면 삭제하지 않기
      if(count<=1){
       alert("더이상 삭제할수 없습니다");
       return;
      }
         //마지막 라인 삭제
         jQuery('#tr'+count).remove();
        
         //삭제할때마다 행개수 -1
      count--;
     });
     
    });
</script>

<button onclick="add_tr()" id="add_btn">추가</button>
<button onclick="delete_tr()" id="delete_btn">삭제</button>
<table cellpadding=0 cellspacing=0 id="text_table" border="1">
</table>

<body>안에 복사붙여넣기 하시면 됩니다.

아까 자바스크립트보다 훨씬 간단해 진것을 볼수 있네요.


2016/09/03 - [Programming/JAVASCRIPT] - 자바스크립트 테이블 행 추가 삭제 하기



'Programming > JQUERY' 카테고리의 다른 글

JQUERY 엔터키를 사용해 포커스 이동하기  (0) 2016.09.12
JQUERY 라디오버튼 값 가져오기  (0) 2016.09.07
JQUERY 값 내용 없애기  (0) 2016.09.06
JQUERY 강제 클릭 이벤트  (0) 2016.09.05
공유하기 링크
댓글