Question

<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);但它停止了工作。

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

Answer 1

你可以这样做

         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);

Answer 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());

这实际上取消了克隆的行。

复制没有值的表格行

2 个答案: