复制没有值的表行答案

【问题标题】：Copy table row without values复制没有值的表行
【发布时间】：2014-03-19 09:12:09
【问题描述】：

<table id="mytable">

<tr id="gonnaclone">
  <td>
      <input type="text" id ="isim" name="f1" class="large" value = "" />
  </td>
  <td>
      <input type="checkbox" id ="komut" name="f2" checked/>
  </td>
</tr>

</table>

我正在尝试克隆表行，但它具有与克隆行相同的值。

var table = document.getElementById("mytable");
var row = document.getElementById("gonnaclone");
var clone = row.cloneNode(true);
table.appendChild(clone);

我试过row.cloneNode(false);，但它停止工作了。

如何将克隆行的值设为空？

【问题讨论】：

为什么要克隆有 id 的元素？
深度克隆参数默认为false，怎么停止工作了？我有点不确定您将克隆行的值设为假是什么意思。你的意思是克隆它而不是它的孩子的？
@Hrishi 因为我找不到任何其他方法。
@ioseph 当我把它设为假时，我不工作。我不知道为什么。我只想复制该行，但我不想要任何属于克隆行的值。
@ioseph 当 deep clone 为 false 时，只有那个节点被克隆，所以我猜只有一个空的 <tr> 被克隆，所以看起来什么也没发生。

var table = document.getElementById("mytable"); var row = document.getElementById("gonnaclone"); var clone = row.cloneNode(true); /** Will Ensure that blank entry are appended in html **/ var InputType = clone.getElementsByTagName("input"); for (var i=0; i<InputType.length; i++){ if( InputType[i].type=='checkbox'){ InputType[i].checked = false; }else{ InputType[i].value=''; } } table.appendChild(clone);

【解决方案2】：

使用 jQuery，您可以执行以下操作：

$("table").append($("table")
    .find("#gonnaclone").clone()
    .find("input").val("").end());

这实际上是进行克隆，找到输入字段，重置输入值并将其附加到表中。

但为了让它更好，你还应该删除克隆行的 ID（否则你会有重复的 ID）：

$("table").append($("table")
    .find("#gonnaclone").clone().removeAttr("id")
    .find("input").val("").end());

一个完整的例子可以在JSFiddle找到。

如果您还想强制复选框处于某种状态（选中/未选中），您甚至可以创建一个更大的链：

$("table").append($("table")
    .find("#gonnaclone").clone().removeAttr("id")
    .find("input").val("").end()
    .find("input:checked").attr("checked", false).end());

这实际上取消选中克隆的行。

【讨论】：