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를 할당해주고, +,-에 버튼 이벤트를 넣는다.
<span title="remove_table();" style="cursor:pointer">+</span> <span title="add_table();" style="cursor:pointer">-</span>
<script> var is_number=<?=$ix?>; // 기존 input 갯수(현재총갯수 default) function add_table() { var max5=5;//최대추가갯수 for(var i=0;i<max5;i++) { $("#table01 > tbody:last").append("<tr><td><input type='text' name='st_num[]' style='width:260px;' value=''/></td><td><input type='text' name='st_name[]' style='width:260px;' value=''/></td></tr>"); } is_number=is_number+5;//총갯수+5 } </script>
테이블의 마지막에 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]; } ?>
이렇게 간단하게 받아 올수 있다.
마지막으로 -함수를 구현한다.
function remove_table() { if(is_number > <?=$ix?>) { var max5=5; //최대 제거 갯수 for(var i=0;i<max5;i++) { $("#table01 > tbody:last > tr:last").remove(); } is=is-5;//총 갯수 -5를 한다. } }
추가했던마지막 -5를 다시 삭제한다.
if문을 두어 최초갯수가 삭제되지않도록 한다.
간단한 JQuery로 항목 추가,제거 하기! 끗!
<script>
$(document).ready(function(){
$("#btn_add").on('click',function(){
$(".depth_div").append("<label><input type='text' name='depth'>개</label><br/>");
});
$("#btn_mi").on('click',function(){
$(".depth_div label:last").remove();
$(".depth_div
br:last").remove();
});
});
</script>
저작자표시 비영리
'study' 카테고리의 다른 글
2019.05.24 |
2017.02.05 |
2017.01.21 |
2017.01.21 |
2017.01.21 |