Question

只需要你的帮助。我的问题是我正在创建一个动态表单。在我的表格中有一个按钮，下面是一张桌子。

情景是： 1.用户将单击该按钮 2.单击按钮后，将动态添加表格行。在我的行内有一个文本框

我可以这样做，但是如何在用户点击按钮后执行此过程。该行将与文本框一起附加。但我想在文本框中分配一个唯一的ID。在我的情况下，我想做这个增量。

这是我的js：

$(document).ready(function(){
    $("[data-item]").on('click',function(){
       $("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr>");
    });
});

这是我的表：

<input type="button" name="add" data-item="123" value="ADD" class="test" id="test" />
<table id="grid1" border="1" style="width: 40%">
    <thead>
       <tr>
         <th style="text-align: center;">CODE</th>
       </tr>
    </thead>               
    <tbody>
    </tbody>
</table>

这是小提琴： http://jsfiddle.net/rochellecanale/xvdMz/

Answer 1

保留一个柜台

$(document).ready(function(){
    var counter = 0;
    $("[data-item]").on('click',function(){
       $("#grid1 tbody").append("<tr><td><input type='text' value='123' style='width:100px' id='in-" + counter++ + "' /></td></tr>");
    });
});

演示：Fiddle

Answer 2

你可以这样做：

创建新行时，您可以检查当前输入的长度，并将其作为ID的一部分添加。

   $("[data-item]").on('click',function(){
       var $el = $("<tr><td><input type='text' id='myInput" + ($('#grid1').find('input').length +1) + "' value='123' style='width:100px' id='' /></td></tr>");

       $("#grid1 tbody").append($el);
    });

<强> Demo

我还有另一个建议，不是保留要克隆的项目，而是可以进行模板化，至少你可以像这样输入你的html。

<script type="text/html" id="clone">
    <tr><td><input type='text' value='123' style='width:100px' id='' /></td></tr>
</script>

然后只使用它来克隆，这样你就可以将html保存在一个地方，将脚本保存在另一个地方。

  $("[data-item]").on('click',function(){
        var $el =$($.parseHTML($('#clone').html())).find('input').prop('id', "myInput" + ($('#grid1').find('input').length +1) ).end();
       $("#grid1 tbody").append($el);
    });

<强> Demo

如何在表中追加行时分配增量ID？

2 个答案: