3

见jsfiddle：http: //jsfiddle.net/bjCz3/

html

<table> <tr class="copyMe"> <td><input type="text" name="test" /></td> </tr> </table> <a id="clickMe" href="#">Click Me</a>

jQuery

  $('#clickMe').click(function(event){
   event.preventDefault();

   var tr = $('.copyMe:last');
   var newTr = tr.clone();
   newTr.appendTo(tr.parent());
  });

如果您在输入中键入文本，然后单击单击我，则会克隆并插入该行（包括输入） - 并具有您输入的数据。

clone() 的 API 说：

.clone() 方法执行匹配元素集的深层复制，这意味着它复制匹配的元素以及它们的所有后代元素和文本节点。出于性能原因， 表单元素的动态状态（例如，输入到输入中的用户数据，以及对选择进行的文本区域或用户选择）不会复制到克隆的元素。克隆操作将这些字段设置为它们在 HTML 中指定的默认值。

http://api.jquery.com/clone/

那么为什么我的输入会填入值，更重要的是，我该如何防止呢？我希望它们像文档所暗示的那样为空/默认。我尝试将两个参数都指定为 false，即使它们默认为 false，它仍然会复制它。

4

3 回答 3

4

如果您正在使用未检查的输入或在页面加载时设置了值。（或者您想要设置的默认值）...在用户触摸之前缓存一行。然后克隆该存储的行以在需要时追加

/* store row on page load*/
 var tr = $('.copyMe:last').clone();
 $('#clickMe').click(function(event){
   event.preventDefault();

  var newTr = tr.clone();....

})
于 2013-11-05T21:35:52.453 回答
2

至于自己清除它的方法。

$('#clickMe').click(function(event){
  event.preventDefault();
  var tr = $('.copyMe:last');
  var newTr = tr.clone();
  newTr.find('input').val('');
  newTr.appendTo(tr.parent());
});

更新

newTr.find("input[type=text], textarea").val("");
newTr.find('input:checkbox').removeAttr('checked');

http://jsfiddle.net/bjCz3/3/

于 2013-11-05T21:28:28.993 回答
1

在 jquery 填写错误报告后自己做：

  $('#clickMe').click(function(event){
   event.preventDefault();
   var tr = $('.copyMe:last');
   var newTr = tr.clone();
   newTr.find(":input").val(''); //find all input types (input, textarea), empty it.
   newTr.appendTo(tr.parent());
  });

更新的工作小提琴：http: //jsfiddle.net/bjCz3/2/

于 2013-11-05T21:25:22.470 回答