第一次點擊最後一行時，動態添加表格行

-1

我想要一個表格，當點擊表格中最後一行時，動態添加一行。具體來說，我有一個有2個文本框的行，每當用戶點擊任意一個框時，我想添加一個新行。第一次點擊最後一行時，動態添加表格行

的目的是提供一個增長的名單，然後將必須刪除行等選項（但沒有特別需要這個問題！）

在我腦海中的邏輯將沿着

線工作

if (either text box clicked && is last row) then 
    addrow()

表fiddle here:

<table class="table table-sm table-hover table-condensed table-bordered" id="paramsTable"> 
    <thead> 
    <tr> 
     <th></th> 
     <th class="text-center">key</th> 
     <th class="text-center">value</th> 
     <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr id="param01"> 
     <td class="text-center"> 
     <label> 
      <input class="vert-align" type="checkbox" value=""> 
     </label> 
     </td> 
     <td> 
     <input class="form-control" id="paramKey01" type="text" aria-label="..." placeholder="key"> 
     </td> 
     <td> 
     <input class="form-control" id="paramVal01" type="text" aria-label="..." placeholder="value"> 
     </td> 
     <td class="text-center"> 
     <button type="submit">Delete</button> 
     </td> 
    </tr> 
    </tbody> 
</table>

建立的請求時的這種功能的一個例子是，如果任何人使用「郵遞員」和集分頁！

來源

2016-09-29 JinJinUK

添加以下腳本並將類delete添加到刪除按鈕。

$(document).on('click','tr:last-child input',function(){ 
    $(this).parents('tbody').append($(this).parents("tr").clone()) 
    $(this).parents('tr').find('input').val(""); 
}); 

$(document).on('click','.delete',function(){ 
    $(this).parents("tr").remove(); 
});

來源

2016-09-29 12:40:42

感謝您的支持。有沒有什麼辦法可以限制'點擊'到兩個輸入框..在這裏提琴：https：//jsfiddle.net/rajenmanani/srj9yxve/1/，你可以看到，當勾選複選框時，它也增加了一個新的行？ – JinJinUK

而不是'tr：最後一個孩子的輸入'嘗試'tr：最後一個孩子的輸入[type =「text」]' –

謝謝！再次工作 – JinJinUK

您應該使用.last()來捕捉您所需的元素，然後觸發包含新字段的.appendTo()。

來源

2016-09-29 12:18:16

第一次點擊最後一行時，動態添加表格行

回答

相關問題