폼을 추가 삭제 버튼을 이용하여 생성하거나 지우려고 합니다.

폼을 추가 삭제 버튼을 이용하여 생성하거나 지우려고 합니다.

QA

폼을 추가 삭제 버튼을 이용하여 생성하거나 지우려고 합니다.

답변 1

본문

먼저 관련 소스입니다.

 

<script type="text/javascript">

$(function() {

$("#add-obj").click(function() {

var obj = $("#tbl").find("input.frm_input");

obj.last().clone().insertAfter(obj.last());

});

$("#remove-obj").click(function() {

var obj = $("#tbl").find("input.frm_input");

var len = obj.length;

if(len == 1) {

alert("더이상 삭제 안 됨");

} else {

$("#tbl").find("input.frm_input").last().remove();

}

});

});

</script>

 

<tr id="tbl">

<th>수리비

<span id="add-obj"><img src="/theme/basic/skin/board/item_afterservice/img/btn_file_add.gif"></span>

<span id="remove-obj"><img src="/theme/basic/skin/board/item_afterservice/img/btn_file_minus.gif"></span>

</th>

<td>

<input type="text" name="wr_17" id="wr_17" class="frm_input" placeholder="수리내용">

<input type="text" name="wr_16" id="wr_16" onkeyup="total_price();" class="frm_input" placeholder="수리비용 ex)10000">원

</td>

</tr>

 

이렇게 되어 있습니다.

 

맨 처음 상태는

 

f89e5ec7f9c24a05379be28604d57977_1485132096_9412.PNG

이렇게 되어 있습니다.

 

저는 수리내용과 수리비용을  쓰는 칸이 플러스 버튼을 누르면 아래에 추가로 두개가 나타나게 하고 싶은데 

 

플러스 버튼을 누르면

f89e5ec7f9c24a05379be28604d57977_1485132096_9667.PNG

이런식으로 수리비용 칸만 늘어납니다..
f89e5ec7f9c24a05379be28604d57977_1485132096_9867.PNG

그리고 마이너스 버튼을 누르면 수리비용 부분이 사라지고 수리내용만 남은 상태에서 

 

더이상 삭제할 수 없다는 경고창이 나타납니다.

 

 

수리내용과 수리비용칸이 밑으로 동시에 추가될 수 있게 하려면 어떻게 하여야 하는지요..

 


 


이 질문에 댓글 쓰기 :

답변 1

<table>
<tr id="tbl">

 <th>수리비

  <span id="add-obj"><img src="/theme/basic/skin/board/item_afterservice/img/btn_file_add.gif"></span>

  <span id="remove-obj"><img src="/theme/basic/skin/board/item_afterservice/img/btn_file_minus.gif"></span>

 </th>

 <td>

   <ul>
   <li>
  <input type="text" name="wr_17" id="wr_17" class="frm_input" placeholder="수리내용">

  <input type="text" name="wr_16" id="wr_16" onkeyup="total_price();" class="frm_input" placeholder="수리비용 ex)10000">원
    </li>
   </ul>
 </td>

</tr>


</table>

 

<script>

 $(function() {

   $("#add-obj").click(function() {

    var obj = $("#tbl").find("ul>li:first").clone();
      
     $("#tbl").find("ul").append(obj);

   });

   $("#remove-obj").click(function() {
 
           if($("#tbl").find("ul>li").length > 1)
           {
        $("#tbl").find("ul>li:last").remove();
           }

   });

  });

</script> 

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 154
© SIRSOFT
현재 페이지 제일 처음으로