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

When a new row is added input name goes up by 1?

本文关键字：增加 输入 添加 新行时      更新时间：2023-09-26

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

当行克隆时，我希望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;
    });
});

这是我的表

 <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"comments"更改为"product1"qty1"remaks1"？而在2行之后的3行之后的行则是无穷多的行。

谢谢你看。

添加到您的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;
                });
        });

JS Fiddle演示。

编辑以回应OP的评论（如下）：

但是id增加了1，我需要输入名称增加1。我该如何更改以增加"名称"？

您可以很容易地做到这一点，只需使name等于内部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;
                });
        });

http://jsfiddle.net/davidThomas/WMvRJ/4/

参考文献：

  • 属性以选择器^=开头
  • each()
  • RegExp，Mozilla开发者网络
  • replace()，Mozilla开发者网络

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

相关文章：