jQuery实现：仅当所有已有字段填满时自动添加表格行

你的代码现在会无限添加行，核心问题有两个：一是监听了整个表单的change事件，新行添加后输入内容又会触发事件；二是只检查了textarea是否有值，没有验证最后一行的所有必填字段是否都填写完成。

下面是修正后的代码，实现仅当表格最后一行的所有可输入字段（除了只读的最终金额）都填写完毕时，才自动添加新行：

修改后的JavaScript代码 #

$(document).ready(function() {
  var count = 1;
  // 只监听表格内可输入元素的change事件
  $('#invoice-item-table').on('change', 'textarea, input:not([readonly])', function() {
    // 获取表格最后一行的所有可输入控件
    var lastRow = $('#invoice-item-table tr:last');
    var inputs = lastRow.find('textarea, input:not([readonly])');
    var allFilled = true;

    // 遍历检查每个输入框是否都有有效内容
    inputs.each(function() {
      // 去除首尾空格后判断是否为空
      if ($.trim($(this).val()) === '') {
        allFilled = false;
        return false; // 发现空值就停止遍历
      }
    });

    // 只有所有字段填完，且下一行还未创建时才添加新行
    if (allFilled && $('#row_id_' + (count + 1)).length === 0) {
      count++;
      $('#total_item').val(count);
      var html_code = '';
      html_code += '<tr id="row_id_' + count + '">';
      html_code += '<td><span id="sr_no">' + count + '</span></td>';
      html_code += '<td><span class="pull-left"><a href="#addnew" data-toggle="modal" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-plus"></span>+</a></span></td>';
      html_code += '<td><textarea cols="200" rows="20" name="item_name[]" id="item_name' + count + '" class="form-control"></textarea></td>';
      html_code += '<td><input type="number" name="order_item_quantity[]" id="order_item_quantity' + count + '" data-srno="' + count + '" class="form-control" /></td>';
      html_code += '<td><input type="number" name="order_item_price[]" id="order_item_price' + count + '" data-srno="' + count + '" class="form-control" /></td>';
      html_code += '<td><input type="number" name="order_item_final_amount[]" id="order_item_final_amount' + count + '" data-srno="' + count + '" readonly class="form-control" /></td>';
      html_code += '<td><button type="button" name="remove_row" id="' + count + '" class="btn btn-danger btn-xs remove_row">X</button></td>';
      html_code += '</tr>';
      $('#invoice-item-table').append(html_code);
    }
  });
});

关键改动说明 #

• 缩小事件监听范围：不再监听整个表单的change，只针对表格内的可输入元素，避免无关操作触发添加逻辑。
• 只验证最后一行：每次仅检查当前最后一行的所有必填字段，确保用户填完当前行才会新增下一行。
• 防止重复添加：通过判断下一行的DOM元素是否存在，避免同一行填完后多次触发事件导致重复加行。
• 严格空值判断：用$.trim()去除输入内容的首尾空格，避免用户输入空格被误判为已填写。

对应的HTML代码（无需修改，保留原结构即可） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody id="invoice-item-table">
  <tr id="row_id_1">
    <td><span id="sr_no">1</span></td>
    <td><span class="pull-left"><a href="#addnew" data-toggle="modal" class="btn btn-info btn-sm"><span class="glyphicon glyphicon-plus"></span>+</a>
      </span>
    </td>
    <td><textarea cols="200" rows="20" name="item_name[]" id="item_name1" class="form-control" autofocus></textarea></td>
    <td><input type="number" name="order_item_quantity[]" id="order_item_quantity1" data-srno="1" class="form-control" /></td>
    <td><input type="number" min="1" step="any" name="order_item_price[]" id="order_item_price1" data-srno="1" class="form-control" /></td>
    <td><input type="number" min="1" step="any" name="order_item_final_amount[]" id="order_item_final_amount1" data-srno="1" readonly class="form-control" /></td>
    <th/>
  </tr>
</tbody>

内容的提问来源于stack exchange，提问作者Giorgos Charilaou