Javascript 当添加新行时，输入名称增加1？

我正在使用按钮向表中添加一行

当行克隆时，我希望3个文本框上的输入名称增加1

这就是我现在使用的脚本。（它克隆行并将其添加到下面，但不+1输入名称

<script type="text/javascript">
$(document).ready(function() {
    $("#add").click(function() {
$('#mytable tbody>tr:last').clone(true).insertAfter('#mytable tbody>tr:last');
$('#mytable tbody>tr:last #product').val('');
    $('#mytable tbody>tr:last #qty').val('');
        $('#mytable tbody>tr:last #remarks').val('');
            $('#mytable tbody>tr:last #add').val('+');
return false;
    });
});

$（文档）.ready（函数（）{
$（“#添加”）。单击（函数（）{
$（'#mytable tbody>tr:last'）.clone（true）.insertAfter（'#mytable tbody>tr:last'）；
$（'mytable tbody>tr:last#product'）.val（''）；
$（'mytable tbody>tr:last#qty'）.val（''）；
$（“#mytable tbody>tr:last#备注”）.val（“”）；
$（'#mytable tbody>tr:last#add'）.val（'+'）；
返回false；
});
});

这是我的桌子

 <table id="mytable" width="250px" border="0" cellspacing="0" cellpadding="0"  style="text-align:center; padding-left:40px; padding-bottom:8px">
   <tr class="product">
   <td style="text-align:center;"><strong>Item</strong></td>
   <td style="text-align:center;"><strong>Qty.</strong></td>
   <td style="text-align:center;"><strong>Remarks</strong></td>
   </tr>
   <tr name="product" class="product">
   <td width="100px"><input type="text" width="100px" name="product" id="product" /></td>
   <td width="5px" style="text-align:center; padding-left:2px; padding-right:2px;"><input type="text" width="5px" size="1" maxlength="2" name="qty" id="qty" /></td>
   <td width="100px"><input type="text" width="100px" name="remarks" id="remarks" /></td>
   <td><input type="submit" name="add" id="add" value="+" /></td>
   </tr>
   </table>

项目
数量
备注

问题是：如何让输入名称“product”“qty”“备注”在下一行更改为“product1”“qty1”“remarks 1”？以及在第三行之后的第二行更改为无限多行

---

感谢您查看。

您可以在javascript中使用全局变量跟踪行号，也可以使用javascript解析前一行的行号。我个人会使用全局变量。

以下内容似乎有效，添加到您的

click（）

处理程序中：

    $('#mytable tbody > tr:last input').each(
        function(){
            /* the following removes the numerical characters from the id */
            var id = this.id.replace(/[0-9]+/g,'');
            /* this iterates through each id that starts with the same sequence
               of characters */
            $('input[id^=' + id + ']').each(
                function(i){
                    /* this sets the id to the sequence of characters,
                       plus the number of the current iteration of the
                       each() method */
                    this.id = id + i;
                });
        });

---

根据OP的评论（如下所示）编辑了：

…但id增加1我需要输入名称增加1。我如何更改此值以增加“名称”

您可以很容易地做到这一点，只需将

名称

与内部

each（）调用中的
id
相等即可：

    $('#mytable tbody > tr:last input').each(
        function(){
            /* the following removes the numerical characters from the id */
            var id = this.id.replace(/[0-9]+/g,'');
            /* this iterates through each id that starts with the same sequence
               of characters */
            $('input[id^=' + id + ']').each(
                function(i){
                    /* this sets the id to the sequence of characters,
                       plus the number of the current iteration of the
                       each() method */
                    this.id = id + i;
                    this.name = this.id;
                });
        });


参考资料：






请考虑为我们发布一个实验，看看（你的脚本的相关摘录）和HTML，工作。嘿，它工作得很好。但是ID上升了1。我需要输入的名字增加1。我怎么改变这个名字来增加名字呢？刚刚编辑了答案来解决这个问题，我道歉：我真的应该自己想到这个=/