在按下添加按鈕之前，它已經(jīng)顯示了一行，其中包含三個輸入框和一個刪除按鈕，當(dāng)我add按下按鈕時，它添加了一行現(xiàn)在我有兩行，當(dāng)我按下添加按鈕時，second time它顯示4 rows ，按下后third time它顯示8 rows我的代碼： <div class="row"> <div class="col-12"> <h3>Add Video</h3> <form id="insertvideo" method="post"> <table id="addrow" width="100%"> <td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add"/></td> <tr class="clonetr"> <td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td> <td>Video description<input type="text" id="videodesc" name="videodesc[]" class="form-control"></td> <td>Video Links<input type="text" id="videolink" name="videolink[]" class="form-control"></td> <td><input type="button" class="btn btn-danger deleteButton" value="delete"/></td> </tr> </table> </form> </div> </div><script> $(function(){ $(".addButton").click(function(){ $('.clonetr').closest("tr").clone(true).appendTo("#addrow"); }); $(".deleteButton").click(function(){ $(this).closest("tr").remove(); });});</script>add按下按鈕后，我只想添加一行。
3 回答
慕容708150
TA貢獻1831條經(jīng)驗 獲得超4個贊
因為您每次都克隆所有現(xiàn)有的tr. 只需克隆最后一個tr并附加它。
另一點是當(dāng)有多個時你必須顯示刪除按鈕tr。因為如果您刪除所有 tr ，則無法使用add按鈕進行克隆。
$(function(){
$(".addButton").click(function(){
$('.clonetr:last').clone(true).appendTo("#addrow");
});
$(".deleteButton").click(function(){
if($('.deleteButton').length > 1){
$(this).closest("tr").remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-12">
<h3>Add Video</h3>
<form id="insertvideo" method="post">
<table id="addrow" width="100%">
<td><input type="button" class="btn btn-success addButton col-3 offset-1" value="add"/></td>
<tr class="clonetr">
<td>Video Title<input type="text" id="videotitle" name="videotitle[]" class="form-control"></td>
<td>Video description<input type="text" id="videodesc" name="videodesc[]" class="form-control"></td>
<td>Video Links<input type="text" id="videolink" name="videolink[]" class="form-control"></td>
<td><input type="button" class="btn btn-danger deleteButton" value="delete"/></td>
</tr>
</table>
</form>
</div>
</div>
當(dāng)年話下
TA貢獻1890條經(jīng)驗 獲得超9個贊
你的問題是在按鈕調(diào)用之后。在您的代碼中，您將獲得所有“tr”并克隆它！好吧，現(xiàn)在，在調(diào)用 add 之后，將 this 與最接近（“tr”）一起使用，克隆它并在使用 append 之后。
像這樣更改您的代碼：
$(function(){
$(".addButton").click(function(){
$(this).closest("tr").clone(true).appendTo("#addrow");
});
$(".deleteButton").click(function(){
$(this).closest("tr").remove();
});
});
慕仙森
TA貢獻1827條經(jīng)驗 獲得超8個贊
最接近第一個變化
$('.clonetr').closest("tr").clone(true).appendTo("#addrow");
到
$('.clonetr').first("tr").clone(true).appendTo("#addrow");
- 3 回答
- 0 關(guān)注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消