Jquery在填充当前输入行后追加新输入行，N次答案

【问题标题】：Jquery appends new input row after filling current input row, N timesJquery在填充当前输入行后追加新输入行，N次
【发布时间】：2015-12-06 02:06:34
【问题描述】：

我有一个表格，其中一行有 3 个输入。我需要的是，在填充此行中的所有输入后，附加一个新行，其中包含与以前相同的 3 个输入。

<table>
  <thead>
    <tr>
      <th>H</th>
      <th>W</th>
      <th>D</th>
      <th>X</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="h[]">
      </td>
      <td>
        <input type="text" name="w[]">
      </td>
      <td>
        <input type="text" name="d[]">
      </td>
      <td>
        <button type="button">x</button>
      </td>
    </tr>
  </tbody>
</table>

提前致谢。

【问题讨论】：

标签： jquery input append

【解决方案1】：

当用户按下enter 时，如果所有字段都有值，则可以添加新行，并在单击删除按钮时删除最接近的tr。以下代码 sn -p 可能会对您有所帮助。

$(document).on('blur', 'tr input[type=text]:last', function() {
      var willAdd = true, tr = $(this).closest('tr');

      tr.find('input[type=text]').each(function() {
          if ($(this).val() == '')
              willAdd = false;
      });
 
      if (!willAdd || tr.next('tr').length) return;

      $('table > tbody').append('<tr><td><input type="text" name="h[]"></td>' +
            '<td><input type="text" name="w[]"></td>' +
            '<td><input type="text" name="d[]"></td>' +
            '<td><button class="delete" type="button">x</button></td></tr>');
});
        
$(document).on('click', '.delete', function () {
      var tr = $(this).closest('tr');
      if ($('table > tbody > tr').length > 1) {
         tr.remove();
      } else {
         tr.find('input[type=text]').val('');
      }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>H</th>
      <th>W</th>
      <th>D</th>
      <th>X</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="h[]">
      </td>
      <td>
        <input type="text" name="w[]">
      </td>
      <td>
        <input type="text" name="d[]">
      </td>
      <td>
        <button class="delete" type="button">x</button>
      </td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢 Azim，这对我的项目帮助很大。我可以在醋栗行最后输入的模糊事件上使用此功能吗？

【解决方案2】：

这是给你的吗？

jQuery(document).ready(function($) {


        var counter = 2;
            $("#addRow").click(function(){
            $('table tr').last().after('<tr><td><input type="text" name="h[]"></td><td><input type="text" name="w[]"></td><td><input type="text" name="d[]"></td></tr>');
            counter++;
        });

    $("#delRow").click(function(){
        if($('table tr').size()>1){
            $('table tr:last-child').remove();
        }else{
            alert('You can not remove the last row from the table.');
        }
     });


})

还有桌子：

<button type="button" id="addRow">Add Row</button>
<button type="button" id="delRow">x</button>
<table>
  <thead>
    <tr>
      <th>H</th>
      <th>W</th>
      <th>D</th>
      <th>X</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="h[]">
      </td>
      <td>
        <input type="text" name="w[]">
      </td>
      <td>
        <input type="text" name="d[]">
      </td>
    </tr>
  </tbody>
</table>

在这里查看它的实际效果：

https://jsfiddle.net/jn8cvg7f/

【讨论】：