Question

我有2个文本字段Name和Phone的简单表单，并且可以在点击Add new按钮时添加新字段。你可以在这里参考jsfiddle。

我的问题是如何在不按Add New按钮的情况下添加新文本字段？当用户填写Text Input name和Text Input Phone时，系统会自动添加新行<tr class="person">。

我的第二个问题是我不知道如何编写删除代码。

更新：我还想设置最大克隆，可以这样做吗？

Answer 1

如果通过“填充”表示“当用户输入与”电话“字段允许的字符数一样多时”，则可以在输入中添加maxlength="10"属性（根据需要设置值）：

<input type="text" name="phone[]" id="phone" maxlength="10"/>

...并在keyup事件中添加一个处理程序，用于检查当前值是否已达到maxlength：

$('input[name="phone\[\]"]').keyup(function() {
    if (this===$('input[name="phone\[\]"]').last()[0]
        && this.value.length===+$(this).attr("maxlength")) {
        $("#add").click();
    }
});

请注意，如果用户在最后一行输入，您可能只想进行此测试，因此上面是if测试的第一部分。

此外，您可能希望新克隆的字段为空，因此您可以在添加功能中执行此操作：

$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last')
                           .find("input").val("");

要设置最大行数，您可以在添加功能中添加测试：

$("#add").click(function() {
    var $lastRow = $('#mytable tbody>tr:last');
    if ($lastRow.index() < 10) { // set maximum rows here
        $lastRow.clone(true).insertAfter($lastRow).find("input").val("");
    }
    return false;
});

另请注意，您不需要为这些输入提供id属性，但如果您这样做，则不应在克隆时复制它，因为id应该是唯一的。

对于删除功能，请为每行添加删除按钮：

<td><input type="button" class="deleteRow" value="Delete"/></td>

......然后：

$("#mytable").on("click","input.deleteRow", function(){
    if ($("#mytable tr").length > 2) // don't delete the last row
        $(this).closest("tr").remove();
});

演示：http://jsfiddle.net/3J65U/15/

Answer 2

您可以在blur以及添加新按钮上执行此操作。另外要注意重复的id，而是使用类：

<tr class="person">
  <td><input type="text" name="name[]" class="name" /></td>
  <td><input type="text" name="phone[]" class="phone" /></td>
</tr>

然后在jQuery中：

$('.phone').blur(function() {
  var ppl = $('.person').length;
  if ( this.value && ppl < 5 ) { // Max 5 people
    $(this).closest('tr').clone(true)
      .insertAfter('#mytable tr:last')
      .find('input').val('').first().focus();
    $(this).off('blur');
  }
});

演示： http://jsfiddle.net/elclanrs/YEBQt/（从输入到输入的标签）

Answer 3

我会扩展enclares - 我会为每个文本框使用.blur()，并且每次检查并确保每个值都不是“” - 这将确保两者都被填充

然后在jQuery中：

$(document).ready(function() {
    $(".phone").blur(function() {
      var phonetxt = $('.phone'.val();
      var nametxt = $('.name').val();
      if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
}

 $(".name").blur(function() {
    var phonetxt = $('.phone'.val();
    var nametxt = $('.name').val();
    if ( phonetxt != "" && nametxt != "" ){
        $(this).closest('tr').clone(true)
            .insertAfter('#mytable tr:last')
            .find('input').val('').first().focus();
    });
  }
});

如何在用户完成填写文本输入时自动克隆？

3 个答案: