在jQuery中删除所有行后，不会添加新行
我有一张桌子里面的表格。在该表中，我有一行输入字段。对于删除行和添加行，我有两个选项。当用户单击“添加行”时，将添加新行；当用户单击“删除行”时，将删除最后一行。这一切都很好。但我有一个问题，假设我点击了删除行选项，最后一行将被删除，这样所有的行都被删除。现在，当我再次单击“添加行”时，它并没有添加新行。有人能解决这个问题吗？以下是此操作的完整代码在jQuery中删除所有行后，不会添加新行,jquery,html,jquery-selectors,Jquery,Html,Jquery Selectors,我有一张桌子里面的表格。在该表中，我有一行输入字段。对于删除行和添加行，我有两个选项。当用户单击“添加行”时，将添加新行；当用户单击“删除行”时，将删除最后一行。这一切都很好。但我有一个问题，假设我点击了删除行选项，最后一行将被删除，这样所有的行都被删除。现在，当我再次单击“添加行”时，它并没有添加新行。有人能解决这个问题吗？以下是此操作的完整代码 <!DOCTYPE HTML> <html lang="en-IN"> <head> <meta ch
<!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>
表td{
边框：1px实心#666；
}
jQuery（文档）.ready（函数（）{
jQuery（“#添加行”）。单击（函数（）{
var row=jQuery（'.formfields-tbody>tr:last'）.clone（true）；
row.find（“输入：文本”）.val（“”）；
row.insertAfter（'.formfields-tbody>tr:last'）；
返回false；
});
jQuery（“#删除行”）.live（'click'，函数（事件）{
jQuery（this.parent（）.parent（）.remove（）；
});
});
移除行
产品
描述
单位成本
量
优惠
全部的
var row jQuery('.form-fields tbody>tr:last').clone(true);
row.insertAfter('.form-fields tbody>tr:last');
选中，这是因为删除表中最后一行时，您没有可克隆的tr 在代码中，您正在克隆并将其附加到表中 更新代码 你的代码的这一部分也是错误的
var row jQuery('.form-fields tbody>tr:last').clone(true);
row.insertAfter('.form-fields tbody>tr:last');
选中当您单击
#添加行tbodyvar row =
jQuery('<tr/>')
.append(jQuery('<td/>')
.append('<input/>', {
type: text,
...
})
.append(...)
...
.appendTo('.form-fields tbody')
;
var行=
jQuery（“”）
.append（jQuery（“”）
.附加（“”{
类型：文本，
...
})
.append（…）
...
.appendTo（“.form fields tbody”）
;
另一个选项是创建一个示例行，您可以创建一个克隆，然后将该示例行附加到
tbodydisplay:none\addlinetbodyvar row =
jQuery('<tr/>')
.append(jQuery('<td/>')
.append('<input/>', {
type: text,
...
})
.append(...)
...
.appendTo('.form-fields tbody')
;
var行=
jQuery（“”）
.append（jQuery（“”）
.附加（“”{
类型：文本，
...
})
.append（…）
...
.appendTo（“.form fields tbody”）
;
另一个选项是创建一个示例行，您可以创建一个克隆，然后将该示例行附加到
tbodydisplay:none然后，您告诉JQuery在最后一个TR之后插入，但没有剩余的TR。将其更改为追加到表：
$（'.form fields tbody'）。追加（行）；然后，您告诉JQuery在最后一个TR之后插入，并且没有剩余的TR。将其更改为追加到表：
$（'.form fields tbody'）。追加（行）