0

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

场景为： 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/

4

2 回答 2

2

保持柜台

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

演示：小提琴

于 2013-10-10T00:54:57.190 回答
1

你可以这样做：

创建新行时，您可以检查当前输入的长度并将其添加为 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);
    });

演示

我有另一个建议，你可以去模板化，而不是保留要克隆的项目，至少你可以像这样放入你的 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);
    });

演示

于 2013-10-10T00:57:22.793 回答