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.
