Question

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

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

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

Answer 1

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

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

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

})

Answer 2

在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/

Answer 3

至于自己清除它的方法。

$('#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/

jQuery clone（）在输入字段中保留用户数据

3 个答案: