如何在jquery中使用clone复制表行,并为控件创建新的唯一ID

时间:2010-08-17 16:02:39

标签: jquery

如何在jquery中使用克隆复制表行并为控件创建新的唯一ID .Clone也会实际复制数据.i不希望复制数据。

表格行包含以下信息:

<tr> 
     <td><input type="text" id="txtTitle" name="txtTitle"></td> 
     <td><input type="text" id="txtLink" name="txtLink"></td> 
</tr> 

我需要为所有新行创建唯一ID,例如txtTitle1,link1,Title2,link2等

1 个答案:

答案 0 :(得分:80)

你可以这样做:

var i = 1;
$("button").click(function() ​​​{
  $("table tr:first").clone().find("input").each(function() {
    $(this).val('').attr('id', function(_, id) { return id + i });
  }).end().appendTo("table");
  i++;
})​;​

这将清空新行的值,并为它们提供以txtTitle1,txtTile2等开头的唯一ID。

You ca give it a try here。如果您还需要更改name,我会将对象传递给.attr()以使其更清洁,如下所示:

var i = 1;
$("button").click(function() {
  $("table tr:first").clone().find("input").each(function() {
    $(this).attr({
      'id': function(_, id) { return id + i },
      'name': function(_, name) { return name + i },
      'value': ''               
    });
  }).end().appendTo("table");
  i++;
});​

You can try that version out here