如何添加附加上.clone一個元素（）是一個按鈕，將刪除該克隆

我有一個表，看起來像這樣：如何添加附加上.clone一個元素（）是一個按鈕，將刪除該克隆

<fieldset> 
    <table id="component_table"> 
     <thead> 
      <tr> 
       <th>Component</th> 
       <th>Component Type</th> 
       <th>Component Thickness</th> 
      </tr> 
     </thead> 
     <tbody id="component_tb"> 
      <tr> 
       <td><?php echo $roofComponentDropDown ?></td> 
       <td><?php echo $roofComponentTypeDropDown ?></td> 
       <td><input id="component_thickness" name="component_thickness[]" type="text"></td> 
      </tr> 
     </tbody> 
    </table> 
    <input type="button" value="+" id="addRows" /> 
</fieldset>

看起來像這樣的瀏覽器，只是爲了讓你更好地瞭解我正在嘗試做什麼。

當用戶點擊+按鈕運行此JQuery的功能在這裏：

$(function() { 
    var $componentTB = $("#component_tb"), 
     $firstTRCopy = $componentTB.children('tr').first().clone(); 
    $("#addRows").click(function() { 
     $componentTB.append($firstTRCopy.clone()); 
    }); 
});

這將克隆我<tr>並追加它放到我的桌子使得它看起來是這樣的： enter image description here

現在這裏是我的問題，而我在新行中我appeneding我也試圖插入另一個<td>到我的錶鏈接或按鈕命名爲remove，當點擊將刪除添加<tr>。

這裏是我嘗試：

$componentTB.append($firstTRCopy.clone()).after("<td><a href='#'>Remove</a></td>");

這不正是給我輸出我需要 enter image description here

這是接近，我想我能得到它的工作，如果我改變了一些CSS ..（我想獲得的鏈接，紅線）

這是我嘗試用-按鈕（首選）

$componentTB.append($firstTRCopy.clone()).after("<input type='button' value='-' id='addRows' />");

但是輸出不工作我如何需要而只是增加通過側面的按鈕側而不是作爲除了被克隆的錶行。

enter image description here

我怎樣才能得到-按鈕添加到我的克隆行，我將如何得到它刪除的刪除鏈接/按鈕被點擊的行？

任何幫助將是真棒，謝謝。

來源

2015-04-12 Zoxac

第一個問題是，你需要一個第四你的表是額外的按鈕，住在這需要第一行以及所有其他行上存在（它只是不需要有「 - '標籤中的按鈕）。

至於獲得該行被刪除，您可以將ID列添加到您的行用爲刪除。

這是一個工作Html頁面，你想要做什麼：

<html> 
<head></head> 
<body> 
<table> 
    <thead> 
     <tr> 
      <th>Component</th> 
      <th>Component Type</th> 
      <th>Component Thickness</th> 
      <th>Remove</th> 
     </tr> 
    </thead> 
    <tbody id="component_tb"> 
     <tr id="row0"> 
      <td><select><option value="test1">Test1</option><option value="test2">Test2</option></select><td> 
      <td><select><option value="test1">Test1</option><option value="test2">Test2</option></select><td> 
      <td><select><input type="text" /></select><td> 
      <td></td> 
     </tr> 
    </tbody> 
</table> 
<input type="button" value="+" id="addRows" /> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script> 
$(function() { 
    var $componentTB = $("#component_tb"), 
     $firstTRCopy = $("#row0").clone(); 
     $idVal = 1; 
    $("#addRows").click(function() { 
     var copy = $firstTRCopy.clone(); 
     var newId = 'row' +$idVal; 
     copy.attr('id', newId); 
     $idVal += 1; 
     copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>"); 
     $componentTB.append(copy); 
    }); 
}); 
function remove(id){ 
    $("#" + id).remove(); 
} 
</script> 
</body> 
</html>

不過，我也鼓勵你看看雙向綁定，如角或Knockout.js。這些允許您將JavaScript模型連接到您的數據，並將更清晰地處理刪除和添加新行。

編輯：如果你想改變的是什麼連接到最終td標籤只是改變追加：

copy.children('td').last().append("<a href=\"javascript:remove('" + newId + "')\">Remove</a>");

來源

2015-04-12 19:22:22 druidicwyrm

是有辦法追加一個按鈕，而不是一個鏈接，並得到同樣的影響？ – Zoxac

是的，我編輯了答案，包括你需要改變的東西。對於一個按鈕，只需將它改爲「「我相信（我現在無法測試它）。 – druidicwyrm

我會在有機會的時候測試它，並在結果（可能是明天）回覆到這裏，謝謝你的回答。 – Zoxac

如何添加附加上.clone一個元素（）是一個按鈕，將刪除該克隆

回答

相關問題