動態插入/刪除表行（包括如何為添加的行提供ID）

Question

我正在嘗試實現動態增長/縮小表，如圖所示。 我知道我需要使用insertRow()函數，但我很困惑如何動態地給行ID。 如果選中復選框，我需要能夠禁用結束日期輸入字段（這就是為什么需要提供ID）。 我需要能夠插入行和刪除行。 我在編程概念方面經驗豐富，但總體上是JavaScript和Web開發的新手。 如果有人能指出我的示例代碼或解釋是否有其他有效的方法，我會非常感激。

http://imgur.com/68t3dH2

Answer 1

一個示例whitout id，適用於每個線控，就像你的截圖一樣（id只是其中一種...）

你不能有多個相同的id，然后假設你的動作按鈕由它們各自的類名“.add”和“。del”調用。

用於刪除

$(".del").on("click", function()
{
    // removing the line of element clicked
    $(this).parents("tr").remove();
});

對於新行

$(".add").on("click", function()
{
    var line = $(this).parents("tr"); // get the line of element clicked
    var lineOffset = line.index(); // get the offset position of this line
    // and using css selector, you can simply add line after another
    $("table tr:eq("+lineOffset+")").after(line.clone(true));
    // line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>"
});

表測試

<table>
    <tr id="a_0"><td>test0</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
    <tr id="a_1"><td>test1</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
    <tr id="a_2"><td>test2</td><td><span class="del">[X]</span><span class="add">[o]</span></td></tr>
</table>

 (function() { $(".del").on("click", function() { // removing the line of element clicked $(this).parents("tr").remove(); }); $(".add").on("click", function() { var line = $(this).parents("tr"); // get the line of element clicked var lineOffset = line.index(); // get the offset position of this line // and using css selector, you can simply add line after another $("table tr:eq(" + lineOffset + ")").after(line.clone(true)); // line.clone(true) is an example, but you can put directly your html like "<tr>.... what you want</tr>" }); })() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr id="a_0"> <td>test0</td> <td><span class="del">[X]</span><span class="add">[o]</span> </td> </tr> <tr id="a_1"> <td>test1</td> <td><span class="del">[X]</span><span class="add">[o]</span> </td> </tr> <tr id="a_2"> <td>test2</td> <td><span class="del">[X]</span><span class="add">[o]</span> </td> </tr> </table> 

但是，您可以在我的示例中看到，不使用以a_ *開頭的ID（是的，它不是必需的和相對的情況）另一種方法是使用jquery方法.index（）來獲取行偏移點擊和..刪除或復制它！

注意 ：

如果您真的需要使用行ID，那么您可以繼續使用這樣的css選擇器：

$("tr[id^='a_']")

如果有表格

$(".del").on("click", function()
{
    // removing the line of element clicked
    $(this).parents("tr").remove();
    if($("table tr").length == 1) // the only one remaining is the hidden_control (if you doesn't use a external button but a row)
       $("#hidden_control").show(); // or .css("display", "block");
});

$("#hidden_control").on("click", function()
{
    $("table").append("<tr><td>...</tr>"); // add a new first line
    $(this).hide(); // and hide it directly until next reinit
});

// hidden button at top (or bottom) of table (not in the table)
<input type="button" id="hidden_control" value="Refill new data">

// or, hidden row solution (where colspan=6 depend the number of cell you have: 
<tr id='hidden_control'><td colspan='6'><button>Refill new data</button></td></tr>

   // CSS class for hidden_control
   #hidden_control
   { display: none; }

文件：

繼續https://api.jquery.com/ ，搜索“parents”，“after”，“remove”，“append”，“html”，“index”

Answer 2

用類或行包裹每一行。

如果你想添加：

 var form="<div> <input type='text'></div>";
 $(document).on('click', ".add", function(){
  $(form).insertAfter($(this).closest("#fields"));
 });    

刪除：

$(document).on('click', ".remove", function(){
 $(this).closest('div').remove();
});

jsFiddle演示

Answer 3

你不需要ID。 復選框的JavaScript處理程序可以通過導航DOM樹來找到“結束日期”字段。 從復選框開始，向上走DOM樹（例如parent() ）找到單元格（ <TD> ），然后走兄弟姐妹（ next()兩次），然后走到輸入字段（例如find('input') ）。

至於添加新行，您可以按照以下答案的建議：

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

然后通過調用<TR>上的remove()來刪除一行。