폼을 추가 삭제 버튼을 이용하여 생성하거나 지우려고 합니다.
본문
먼저 관련 소스입니다.
<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>
이렇게 되어 있습니다.
맨 처음 상태는
이렇게 되어 있습니다.
저는 수리내용과 수리비용을 쓰는 칸이 플러스 버튼을 누르면 아래에 추가로 두개가 나타나게 하고 싶은데
플러스 버튼을 누르면
이런식으로 수리비용 칸만 늘어납니다..
그리고 마이너스 버튼을 누르면 수리비용 부분이 사라지고 수리내용만 남은 상태에서
더이상 삭제할 수 없다는 경고창이 나타납니다.
수리내용과 수리비용칸이 밑으로 동시에 추가될 수 있게 하려면 어떻게 하여야 하는지요..
답변 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>