在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中刪除所有行時不添加新行

回答

相關問題