当jQuery中的所有行都已删除时，不会添加新行
我在一张桌子里有一张表格。在该表中，我有一行用于输入字段。我有两个删除行和添加行的选项。在添加行中，当用户单击时，将添加一个新行；当用户将单击删除行时，最后一行将被删除。所有这些都运行得很好。但我有一个问题，假设我点击了remove row选项，最后一行将被删除，这样所有行都将被删除。现在再一次，当我点击add line时，并没有添加新的行。那么有人能解决这个问题吗？下面是完整的代码
<!DOCTYPE HTML>
<html lang="en-IN">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="jquery1.7.2.js"></script>
<body>
<style type="text/css">
table td {
border: 1px solid #666;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#add-line").click(function() {
var row = jQuery('.form-fields tbody>tr:last').clone(true);
row.find("input:text").val("");
row.insertAfter('.form-fields tbody>tr:last');
return false;
});
jQuery('#remove-row').live('click',function(event){
jQuery(this).parent().parent().remove();
});
});
</script>
<div id="form">
<table id="form-headings">
<tr>
<td width="15%">Remove Rows</td>
<td width="15%">Product</td>
<td width="16%">Description</td>
<td width="13%">Unit Cost</td>
<td width="14%">Quantity</td>
<td width="12%">Discount</td>
<td width="14%">Total</td>
</tr>
</table>
<div class="row">
<div class="form-fields">
<table>
<tr>
<td><input type="button" id="remove-row" value="Remove Row" /></td>
<td><input type="text" id="form_product" size="5px"/></td>
<td><input type="text" id="form_description" size="5px"/></td>
<td><input type="text" id="form_unit_cost" size="5px"/></td>
<td><input type="text" id="form_quantity" size="5px"/></td>
<td><input type="text" id="form_discount" size="5px"/></td>
<td><input type="text" id="form_total" size="5px"/></td>
</tr>
</table>
</div>
</div>
<input type="button" id="add-line" value="Add Line" />
</div>
</body>
</html>回答 3
Stack Overflow用户
发布于 2012-09-27 01:11:46
这是因为当您删除表中的最后一行时，您没有能够克隆的tr。
在您要克隆的代码中，然后将其附加到表中。
更新了代码
此外，这部分代码也是错误的
var row jQuery('.form-fields tbody>tr:last').clone(true);
row.insertAfter('.form-fields tbody>tr:last');因为一旦删除了最后一行，您就找不到tr>last了。它将返回false..所以试着避免它..
您可以创建一个包含此行结构的虚拟行，并从那里克隆它。
我已经创建了一个保存行的.prototype类。克隆它并插入它..
检查FIDDLE
Stack Overflow用户
发布于 2012-09-27 01:12:09
当您单击#add-line按钮时，它会克隆表中的最后一行并将其插入到表的末尾。在删除所有行之后，这将不起作用，因为没有要克隆的最后一行(它不存在)。此外，您将在最后一行之后插入克隆，最后一行也不存在，因此不会在任何地方插入它。
我建议使用jQuery来创建一个新行，根据需要分配属性，然后将其附加到您的
像这样的东西应该是有效的：
var row =
jQuery('<tr/>')
.append(jQuery('<td/>')
.append('<input/>', {
type: text,
...
})
.append(...)
...
.appendTo('.form-fields tbody')
;另一种选择是创建一个可以创建克隆的样本行，然后将该tbody.追加到您的您可以使用display: none在标记中包含示例行，也可以创建它并使其在JavaScript中可用。
Stack Overflow用户
发布于 2012-09-27 01:12:57
首先，没有剩余的行可供克隆。您可以通过动态创建它，或者在隐藏的div中保留一行并克隆它来防止这种情况。
然后告诉JQuery在最后一个TR之后插入，并且没有剩余的TR。将其更改为追加到表中：$('.form-fields tbody').append(row);
https://stackoverflow.com/questions/12606728
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号