HTML代码

Question

我是JavaScript的新手，我有一个带有两个文本字段的html表并添加按钮，现在我写了一个小jquery脚本，当点击添加按钮生成另外两个文本字段所有这些工作成功但我的问题是如何将这些动态生成的字段放在不同的名称和ID中。我的代码如下。

HTML代码

 <table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
  <tr>
    <td>ACC_CODE</td>
    <td>ACC_NAME</td>
    <td>ACTION</td>
  </tr>
  <tr>
    <td>&nbsp;<input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
    <td>&nbsp;<input type="text" class="click" name="parentinput"  id="parentinput" /></td>
     <td>&nbsp;<input type="button" value="Add New" class="addNew" name="addNew" /></td>
  </tr>
</table>

Jquery代码

$(document).ready(function() {      
 $('.addNew').live({
    click: function(){
 $('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs"  id="parentinputs" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');

 });
});

请帮助您了解如何生成这些字段的不同名称和ID。

Answer 1

首先，自jquery 1.7以来，不推荐使用.live 使用.delegate

所以..

    $(document).ready(function() {
       var idIndex=1;
        $(document).delegate("click",".addNew",function() {
            $('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes_'+idIndex+'"/></td><td><input type="text" class="click" name="parentinputs"  id="parentinputs_'+idIndex+'" /></td><td><input type="button" value="Add New" class="add" name="add" /></td></tr>');
            idIndex++;
        });

    });

Answer 2

我有一个可能正常的建议，

为什么不将输入字段设为数组，

所以当你提交它时，它将是一组输入组

或者您可以轻松地将名称ID设为基于tr索引

例如name_1和id_1，name_2和id_2

Answer 3

我会使用on（）（和off（））。您将其设置为父容器（在本例中为表）并侦听类“addNew”。每次将具有class =“addNew”的新项目添加到表格中时，它都将处于活动状态。

<table width="50%" border="1" cellspacing="0" cellpadding="0" class="table">
  <tr>
    <td>ACC_CODE</td>
    <td>ACC_NAME</td>
    <td>ACTION</td>
  </tr>
  <tr>
    <td>&nbsp;<input type="text" class="acc_code" name="acc_code" id="acc_code"/></td>
    <td>&nbsp;<input type="text" class="click" name="parentinput"  id="parentinput" /></td>
    <td>&nbsp;<input type="button" value="Add New" class="addNew" name="addNew" /></td>
  </tr>
</table>
<script>
$(document).ready(function() {      
  $('.table').on('click', '.addNew',  function() {
    $('.table tr:last').after('<tr><td><input type="text" class="acc_code" name="acc_codes" id="acc_codes"/></td><td><input type="text" class="click" name="parentinputs"  id="parentinputs" /></td><td><input type="button" value="Add New" class="addNew" name="add" /></td></tr>');
  });
});
</script>

但请注意：在您的代码中，您执行了此操作：

<input type="button" value="Add New" class="add" name="add" />

当然这不起作用;它必须是class =“addNew”

如何设置使用jquery live（）动态生成的动态输入名称

HTML代码

Jquery代码

3 个答案: