第一次点击最后一行时，动态添加表格行

-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

第一次点击最后一行时，动态添加表格行

回答

相关问题