Cloning whole html table (with uniq IDs) element with javascript

Question

I somehow made my newRow() function work. Code you can see below. Now i need to clone whole table. I tried to adjust the newRow() function to do this task, obviously my attempt was unaccessful.

My js code:

function newRow( valoda, dataTable){
    var row, table, len, tags, newRow;
    row = document.getElementById('valoda');
    table = document.getElementById('dataTable');
    tags = table.getElementsByTagName('tr');
    len = tags.length;

    newRow = row.cloneNode(true);
    newRow.id = "valoda_0" +  len;
    table.appendChild(newRow);
}

function newTable(dataTable3){
    var table, len, tags, newTable;

    table = document.getElementById('dataTable3');
    tags = table.getElementsByTagName('table');
    len = tags.length;

    newTable = row.cloneNode(true);
    newTable.id = "darbs_0" +  len;
    table.appendChild(newRow);
}

And HTML:

<fieldset class="row2">
   <legend>Iemaņas un zināšanas</legend>
   <p> 
      <input type="button" value="Pievienot" onClick="newRow( 'valoda', 'dataTable')" /> 
   <p>
   </p>
   </p>
   <table  class="virsraksti" border="1">
      <tr>
         <th style="width:25%"> Valoda</th>
         <th style="width:25%"> Runātprasme </th>
         <th style="width:25%"> Lasītprasme </th>
         <th style="width:25%"> Rakstītprasme </th>
      </tr>
   </table>
   <table id="dataTable" class="cv" border="1">
      <tbody>
         <tr id="valoda">
            <td>
               <input type="text" style="width:100%;" placeholder="ievadiet valodu">
            </td>
            <td>
               <select id="Runatprasme_izv" name="Runatprasme_izv" required="required">
                  <option>dzimtā valoda</option>
                  <option>teicami</option>
                  <option>labi</option>
                  <option>viduvēji</option>
                  <option>pamatzināšanas</option>
               </select>
            </td>
            <td>
               <select id="Lasitprasme_izv" name="Lasitprasme_izv" required="required">
                  <option>teicami</option>
                  <option>labi</option>
                  <option>viduvēji</option>
                  <option>pamatzināšanas</option>
               </select>
            </td>
            <td>
               <select id="Rakstitprasme_izv" name="Rakstitprasme_izv" required="required">
                  <option>teicami</option>
                  <option>labi</option>
                  <option>viduvēji</option>
                  <option>pamatzināšanas</option>
               </select>
            </td>
         </tr>
      </tbody>
   </table>
   <div class="clear"></div>
</fieldset>
<fieldset class="row3">
   <legend>Datorzināšanas</legend>
   <p>
      <input type="button" value="Pievienot" onClick="newRow2( 'datori', 'dataTable2')"/> 
   </p>
   <p>
   <table>
      <th>
      <th style="width:75%"> Nosaukums </th>
      <th>
      <th style="width:25%"> Zināšanu līmenis </th>
      </tr>
   </table>
   <table id="dataTable2" class="cv" border="1">
      <tr id="datori">
         <td style="width:75%"><input type="text" style="width:100%;" name="Dator_nos"placeholder="Ievadiet programmatūras nosaukumu"></td>
         <td>
            <select id="BX_gender" name="BX_gender" style="width:100%">
               <option>teicami</option>
               <option>labi</option>
               <option>pamatzināšanas</option>
            </select>
         </td>
      </tr>
   </table>
   </p>
</fieldset>
<fieldset class="row4">
   <legend>Darba pieredze</legend>
   <p> 
      <input type="button" value="Pievienot" onClick="newTable('dataTable3')" /> 
   <p></p>
   </p>
   <table id="dataTable3" class="cv" border="1">
      <tr>
         <td style="width:5%; text-align:left"> Darba vieta/Uzņēmums: </td>
         <td style="padding:0"> <input type="text" class="darbs"></td>
      </tr>
      <tr>
         <td style="width:5%; text-align:left"> Datums no: </td>
         <td style="padding:0"> <input type="text" class="darbs"></td>
      </tr>
      <tr>
         <td style="width:5%; text-align:left"> Datums līdz:</td>
         <td style="padding:0"> <input type="text" class="darbs"></td>
      </tr>
      <tr>
         <td style="width:5%; text-align:left"> Ieņemamais amats:</td>
         <td style="padding:0"> <input type="text" class="darbs"></td>
      </tr>
      <tr>
         <td style="width:5%; text-align:left"> Amata kategorija:</td>
         <td style="padding:0"> <input type="text" class="darbs"></td>
      </tr>
   </table>
</fieldset>

I know there are a lot of ways to clone table rows, but since i am about to put all the input data in DB, i needed a function which creates a uniq IDs for every created element, and i know that newRow() function does that, but what about addTable() ? Will it create only unique table IDs, or is it possible to get new uniques for all the input fields in table?

I hope u understood my twisted question. Upon a request i will add a fiddle if needed.

Can you show me the right solution here?

Big thanks in advance.

Ok i was in a bit of a rush here, function newTable last row: table.appendChild(newRow); i changed it to: table.appendChild(newTable) doesnt work either. — user3043888
– user3043888, Commented Dec 5, 2013 at 22:00
did you check this answer allready? stackoverflow.com/questions/1728284/… — paka
– paka, Commented Dec 5, 2013 at 22:01
just did, but its about single row adding and deleting, i need to clone whole table, thats this question is all about, my newRow function is working :) — user3043888
– user3043888, Commented Dec 5, 2013 at 22:06

divyaSharma · Accepted Answer · 2013-12-05 22:03:18Z

0

https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode

HTML code -

<table id="mytable">
    <thead>
        <tr>
            <th colspan=3>Values (Type A)</th>
        </tr>
        <tr>
            <th colspan=3>Values (Type B)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td><td>2</td><td>3</td>
        </tr>
        <tr>
            <td>4</td><td>5</td><td>6</td>
        </tr>
    </tbody>
</table>

JavaScript code -

var mytable = document.querySelector('#mytable');
var clonedMyTable = mytable.cloneNode();
console.log(clonedMyTable);

http://jsfiddle.net/CLvD2/2/

answered Dec 5, 2013 at 22:03

divyaSharma

1332 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3041160 · Accepted Answer · 2013-12-05 22:24:42Z

0

javascript :

$("#mytable").clone().appendTo(".mytarget");

html:

<table id="mytable">
<tr>
<td>cell1</td>
<td>cell2</td>
</tr>
</table>

<div class="mytarget"></div>

answered Dec 5, 2013 at 22:24

user3041160

6743 silver badges5 bronze badges

Collectives™ on Stack Overflow

Cloning whole html table (with uniq IDs) element with javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related