Question

我希望有一个表，在单击表中的最后一行时动态添加一行。具体来说，我有一行有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>

此功能的一个示例是，如果有人在构建请求时使用“邮递员”和标题选项卡！

Answer 1

您应该使用.last()来捕获所需的元素，然后触发包含新字段的.appendTo()。

Answer 2

添加以下脚本并将类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();
 });

第一次单击最后一行字段时动态添加表行

2 个答案: