jQuery的追加不追加，但刪除

我有這樣的一個表：jQuery的追加不追加，但刪除

<table id="invrows"> 
    <tbody> 
     <tr id="rowrow"> 
      <td><input type="text" id="idef" name="idef[]" class="required"></td> 
      <td><input type="text" id="iprice" name="iprice[]" class="required"></td> 
      <td><input type="text" id="ivat" name="ivat[]" class="required"></td> 
      <td><div id="addrow">Add One More</div></td> 
     </tr> 
    </tbody> 
</table>

而且希望每次單擊「addrow」 div時添加一個新行到表中。所以這是我的jQuery代碼：

$('#addrow').click(function(){ 
     $('#invrows tr:last').append($('#rowrow')); 
});

但是，而不是增加一個新的「#rowrow」行（聽起來可笑，我知道），它只是刪除此一行，並因此留下我一個空表。我試着將該行的HTML代碼添加到.append（），並且工作得很好，但我希望它能夠與DOM元素一起工作，以便在原始行發生更改時，沒有任何內容被破壞，並且jQuery代碼本身不需要編輯。所有幫助表示感謝！

來源

2013-01-10 Borniet

作爲一個經驗法則，如果這聽起來荒謬，它可能是，命名約定是一大福音;） – RhysW

真:-)我認罪 – Borniet

;）都犯了一些最佳做法（我不會給他們打電話規則）在某個點使用字符串 – RhysW

追加行的克隆，而不是原始行本身。此外，您應該刪除值您的ID，以便不重複它在克隆的元素：

// Use event-delegation since we'll have many rows 
$("#invrows").on("click", ".addrow", function (e) { 

    // Clone row 
    var clone = $(this).closest("tr").clone(); 

    // Append to table, clear inputs 
    clone.appendTo(e.delegateTarget).find(":input").val(''); 

    // Remove add button from original row 
    $(this).closest("td").remove(); 

});

小提琴：http://jsfiddle.net/jonathansampson/4MRx5/

來源

2013-01-10 14:53:34 Sampson

當用戶在按下添加按鈕之前填充文本字段時，這也是一個問題。 –

你想要做什麼是追加rowrow的HTML內容，以便代替嘗試：

$('#addrow').click(function(){ 
    $('#invrows tr:last').append($('#rowrow').html());

}）;

來源

2013-01-10 14:54:53 Jake

您正在追加到該行，而不是正文。你想要的東西是這樣的：

$('#addrow').click(function(){ 
     $('#invrows tbody').append($('#rowrow').clone()); 
});

哦，和其他人一樣，要麼克隆元素，要麼直接獲取html。（編輯代碼來反映這一點）。

另外，你最終會得到兩行相同的id，這也不是很好。 :)

還有一件事，看看.clone()的文檔看起來它實際上是必需的，否則jquery只是移動實際的元素。看到那裏的例子。

來源

2013-01-10 14:55:08

這是不正確的，因爲html不包含實際的，因此將表格數據直接添加到正文中。 –

啊，對不起，你是正確的......編輯糾正錯誤。 –

你不應該使用append（）。有了這個，你將在父表中插入ne錶行。我認爲你需要使用after（）來達到你的目的。

$('#addrow').click(function(){ 
     $('#invrows tr:last').after($('#rowrow').clone()); 
});

來源

2013-01-10 14:57:43 Zeal

創建一個函數，返回一個新行以供您追加。

function newRow (table) { 
    var html = '<tr id="rowrow' + (table.tBodies[0].rows.length + 1) + '">' + 
     '<td><input type="text" id="idef" name="idef[]" class="required"></td>' + 
     '<td><input type="text" id="iprice" name="iprice[]" class="required"></td>' + 
     '<td><input type="text" id="ivat" name="ivat[]" class="required"></td>' + 
     '<td><div id="addrow">Add One More</div></td>' + 
    '</tr>'; 
    $(table.tBodies[0]).append(html); 
}

在這裏它是在使用中：

var $table = $('#invrows'); 
$('#addrow').click(function(){ 
    $table.append(newRow($table[0])); 
});

現在，如果你需要修改結構，你只是做在NEWROW功能。您也可以使用模板引擎。

請注意，您的所有輸入和addRow div仍然存在重複的ID問題。

來源

2013-01-10 15:18:14

jQuery的追加不追加，但刪除

回答

相關問題