javascript - Copy table row without values - Stack Overflow

admin管理员组

文章数量:1291696

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

I am trying to clone table row but it is ing with the same value of the cloned row.

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

I tried row.cloneNode(false); but it stopped working.

How can I make the value of clone row empty?

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

I am trying to clone table row but it is ing with the same value of the cloned row.

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

I tried row.cloneNode(false); but it stopped working.

How can I make the value of clone row empty?

• javascript
• html
• html-table
• clone

Share Improve this question Follow edited Oct 9, 2017 at 21:28 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 19, 2014 at 7:24 abbyabby 67822 gold badges1010 silver badges2222 bronze badges 5

• Why are you cloning elements which have ids? – Hrishi Commented Feb 19, 2014 at 7:28
• The deep clone parameter is false by default, how has it stopped working? I'm a bit unsure what you mean by making the value of clone row false. Do you mean clone it but not it's children <td>'s ? – ioseph Commented Feb 19, 2014 at 7:30
• @Hrishi because i couldnt find any other method. – abby Commented Feb 19, 2014 at 7:31
• @ioseph when i make it false, i does not work. i dont know why. I just want to copy the row but i dont want any values which are belong to cloned row. – abby Commented Feb 19, 2014 at 7:33
• @ioseph When deep clone is false, only that node alone is cloned, so I guess only an empty <tr> is cloned, so it appears nothing happened. – Passerby Commented Feb 19, 2014 at 7:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

You can do it this way

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

With jQuery you could do the following:

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

What this actually does is make a clone, find the input fields, reset the input value and append it to the table.

But to make it even better you should also remove the ID of the cloned row (otherwise you would have duplicate IDs):

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

A plete example can be found on JSFiddle.

---

If you also want to force the checkbox to be in a certain state (checked/unchecked) you could even make a bigger chain:

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

This actually unchecks the cloned row.

本文标签： javascriptCopy table row without valuesStack Overflow