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>
<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>
<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] - 자바스크립트 테이블 행 추가 삭제 하기