Javascript 如何自动克隆<；tr>；用户何时完成填充文本输入？

我有一个简单的表单，有两个文本字段

Name

和

Phone

，当点击

addnew

按钮时可以添加新字段。你可以在这里查阅

我的问题是如何添加新文本字段而不按

addnew

按钮？当用户填写

文本输入名称

和

文本输入电话

时，将自动添加新行

我的第二个问题是我不知道如何为delete编写代码

---

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

您可以在

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');
  }
});

$(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();
    });
  }
});​

$（'.phone'）.blur（函数（）{
var ppl=$（'.person'）.length；
如果（this.value&&ppl<5）{//最多5人
$（this）.clone（'tr'）.clone（true）
.insertAfter（“#mytable tr:last”）
.find（'input'）.val（'.first（）.focus（）；
$（此）.off（'blur'）；
}
});

---

演示：（从输入到输入的选项卡）

您可以在

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');
  }
});

$(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();
    });
  }
});​

$（'.phone'）.blur（函数（）{
var ppl=$（'.person'）.length；
如果（this.value&&ppl<5）{//最多5人
$（this）.clone（'tr'）.clone（true）
.insertAfter（“#mytable tr:last”）
.find（'input'）.val（'.first（）.focus（）；
$（此）.off（'blur'）；
}
});

---

演示：（从输入到输入的选项卡）

我将在enclares上展开-我将对每个文本框使用

.blur（）

，每次检查并确保每个值不是“”-这将确保两个值都已填充

然后在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');
  }
});

$(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();
    });
  }
});​

---

我将在enclares上展开—我将对每个文本框使用

.blur（）

，每次检查并确保每个值不是“”—这将确保两个值都已填充

然后在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');
  }
});

$(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();
    });
  }
});​

如果“填充”的意思是“当用户输入电话字段允许的字符数时”，则可以向输入添加

maxlength=“10”

属性（根据需要设置值）：

请注意，您可能只希望在用户在最后一行中键入时执行此测试，因此是上面的

if

测试的第一部分

另外，您可能希望新克隆的字段为空，因此可以在add函数中执行此操作：

$('#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;
});

要设置最大行数，可以在add函数中进行测试：

$('#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;
});

…然后：

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

演示：

如果“填充”的意思是“当用户输入电话字段允许的字符数时”，则可以在输入中添加

maxlength=“10”

属性（根据需要设置值）：

请注意，您可能只希望在用户在最后一行中键入时执行此测试，因此是上面的

if

测试的第一部分

另外，您可能希望新克隆的字段为空，因此可以在add函数中执行此操作：

$('#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;
});

要设置最大行数，可以在add函数中进行测试：

$('#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;
});

…然后：

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

---

演示：

您知道如何设置最大克隆数吗？然后再次删除（使用按钮）检查我的编辑以获得最大克隆解决方案。我将把删除解决方案留给您。您知道如何设置最大克隆数吗？然后再次删除（使用按钮）检查我的编辑以获得最大克隆解决方案。我将把删除解决方案留给你。这就是我要找的，你知道如何设置最大克隆和添加删除功能吗？我已经更新了我的答案，以显示一种方法来强制最大行数和删除行。为什么你们都在使用

name='something[]'

what

[]

does？@PedroGabriel-我在回答中使用了它，因为OP在原始标记中有它。客户端它什么也不做，

[]

部分只是名称的一部分，但是一些服务器端技术（例如PHP）将其用作指示请求参数应该是一个数组，你知道如何设置最大克隆和添加删除功能吗？我已经更新了我的答案，以显示一种方法来强制执行最大行数和删除行。为什么你们都使用

name='something[]'

做什么？@PedroGabriel-我在我的答案中使用了它，因为OP在原始标记中有它。客户端它什么也不做，

[]

部分只是名称的一部分，但是一些服务器端技术（例如PHP）将其用作指示请求参数应该是数组。