在jQuery中删除所有行时不添加新行

我在表格中有一个表单。在那张表中我有输入字段的行。我有两个选项用于删除行和添加行。在添加行时，用户将点击一个新行将被添加，当用户点击删除行时，最后一行将被删除。所有这些工作正常。但我有一个问题，假设我点击了删除行选项，最后一行将被删除，这样所有的行都被删除。现在再次点击添加行时，它不会添加新行。那么有人能解决这个问题吗？下面是该在jQuery中删除所有行时不添加新行

<!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>

来源

2012-09-26 amit patel

的完整代码那是因为你没有能够在TR，当你删除表中的最后一行克隆。

在你克隆，然后将其追加到表中的代码..

更新的代码

而且你的这部分代码是错误的

var row jQuery('.form-fields tbody>tr:last').clone(true); 
row.insertAfter('.form-fields tbody>tr:last');

因为一旦最后行被删除，你不会找到tr> last ..它会返回false ..所以请尽量避免它..

您可以创建广告ummy行持有该行结构，并从那里复制它..

我创建了持有该行..克隆它并将其插入一个.prototype类..

检查FIDDLE

来源

2012-09-26 17:11:46

那么该怎么做？解决这个问题的最佳解决方案是什么？ –

查看我更新的代码.. –

@sushanta reddy好的..好吧，它在这里工作。你能告诉我这里有什么样的原型吗？ –

当你点击#add-line按钮，它会克隆表格中的最后一行并将其插入到表格的最后。由于没有最后一行克隆（它不存在），所以在删除所有行后，这不起作用。此外，您将在最后一行之后插入克隆，该克隆再次不存在，因此不会将其插入到任何位置。

我会推荐使用jQuery到创建一个新行，根据需要分配属性，然后将其附加到您的tbody。

像这样的东西应该工作：

var row = 
    jQuery('<tr/>') 
    .append(jQuery('<td/>') 
     .append('<input/>', { 
      type: text, 
      ... 
     }) 
    .append(...) 
    ... 
    .appendTo('.form-fields tbody') 
;

另一种选择是创建您可以创建一个克隆样本行，然后添加你tbody。您可以在display: none的标记中使用示例行，或者您可以创建它并使其在JavaScript中可用。

来源

2012-09-26 17:12:08 Zhihao

首先，没有剩下的行克隆。你可以通过动态创建它，或者在一个隐藏的div中保留一行，并克隆它来防范这种情况。

然后你告诉JQuery在最后一个TR之后插入，并且没有剩下的TR。将其更改为追加到表格：$('.form-fields tbody').append(row);

来源

2012-09-26 17:12:57 jalynn2

在jQuery中删除所有行时不添加新行

回答

相关问题