Javascript 如何限制表单中的动态输入？ $（文档）.ready（函数（）{ var i=1； $（'#添加'）。单击（函数（）{ i++； $（“#dynamic_field”）.append（'Company Name:Project Name:Role:

您只需在“添加”按钮中计算表中的行数，单击-如果已经有五行或更多行，请退出，不要添加任何新行

$(document).ready(function(){
  var i = 1;
  $('#add').click(function(){
    i++;
    $('#dynamic_field').append('<tr id="row'+i+'"><td><div class="form-group"><label for="company">Company Name:</label><input type="text" class="form-control" name="company[]"></div><div class="form-group"><label for="project">Project Name:</label><input type="text" class="form-control" name="project[]"></div><div class="form-group"><label for="role">Role:</label><input type="text" class="form-control" name="role[]"></div<div class="form-group"><label for="duration">Duration:</label><input type="text" class="form-control" name="duration[]"></div><div class="form-group"><label for="learning">Key Learning:</label><textarea class="form-control" rows="5" name="learning[]" maxlength="150"></textarea></div></td><td><br><br><br><br><br><br><br><center><button name="remove" id="'+i+'" class="btn btn-danger btn_remove">Remove</button></center></td></tr>');
  });

  $(document).on('click','.btn_remove', function(){
    var button_id = $(this).attr("id");
    $("#row"+button_id+"").remove();
  });

  $('#submit').click(function(){
    $.ajax({
      async: true,
      url: "internship_details.php",
      method: "POST",
      data: $('#internship_details').serialize(),
      success:function(rt)
      {
        alert(rt);
        $('#internship_details')[0].reset();
      }
    });
  });
});

$（文档）.ready（函数（）{
var i=1；
$（'#添加'）。单击（函数（）{
变量表=$（“#动态#u字段”）；
if（table.children（'tr'）.length>=5）返回；//如果我们已经有5行，就不要再添加了
i++；
table.append（'Company Name:Project Name:Role:只需在
处理程序中使用
if
条件，单击
检查添加或删除的项目数量

以下是一个例子：


var i=0；
$（'#添加'）。单击（函数（）{
如果（i<5）{
i++；
$（'#output'）.html（i）
}否则{
警告（“不允许超过5个元素”）；
}
})
$（“#删除”）。单击（函数（）{
如果（i>0）{
我--；
$（'#output'）.html（i）
}
})

添加
去除
0
它仍在添加5个以上。我想如果用户单击“添加更多”按钮的次数超过5个，则会出现一个警报，提示无法添加更多。第6个元素不应出现。谢谢：）最后一件事是，如何添加表示不能添加更多的警报
$(document).ready(function(){
  var i = 1;
  $('#add').click(function(){
    var table = $('#dynamic_field');
    if(table.children('tr').length >= 5) return; // if we already have 5 rows, don't add anymore
    i++;
    table.append('<tr id="row'+i+'"><td><div class="form-group"><label for="company">Company Name:</label><input type="text" class="form-control" name="company[]"></div><div class="form-group"><label for="project">Project Name:</label><input type="text" class="form-control" name="project[]"></div><div class="form-group"><label for="role">Role:</label><input type="text" class="form-control" name="role[]"></div<div class="form-group"><label for="duration">Duration:</label><input type="text" class="form-control" name="duration[]"></div><div class="form-group"><label for="learning">Key Learning:</label><textarea class="form-control" rows="5" name="learning[]" maxlength="150"></textarea></div></td><td><br><br><br><br><br><br><br><center><button name="remove" id="'+i+'" class="btn btn-danger btn_remove">Remove</button></center></td></tr>');
  });

  $(document).on('click','.btn_remove', function(){
    var button_id = $(this).attr("id");
    $("#row"+button_id+"").remove();
  });

  $('#submit').click(function(){
    $.ajax({
      async: true,
      url: "internship_details.php",
      method: "POST",
      data: $('#internship_details').serialize(),
      success:function(rt)
      {
        alert(rt);
        $('#internship_details')[0].reset();
      }
    });
  });
});