Sorry in advance for the poor coding.
I’ve added a button to the bottom of a product ordering table that I’m working on which when clicked by the user adds an additional table row.
The button works and adds another row however I want it to add the row with the same dropdown cells above.
<div>
<table id="lst-table">
<thead>
<tr>
<th class="lst-th" scope="col">Model <br>Ref.</th>
<th class="lst-th" scope="col">Perforation <br>Type </th>
<th class="lst-th" scope="col">LST Cover <br>Length
</th>
</thead>
<tbody class="lst-tbody">
<tr>
<td>
<select>
<option value="">Model Ref.</option>
<option value="145-520">ARM 145-520</option>
<option value="145-670">ARM 145-670</option>
<option value="145-820">ARM 145-820</option>
<option value="145-920">ARM 145-920</option>
<option value="165-520">ARM 165-520</option>
<option value="165-670">ARM 165-670</option>
<option value="165-820">ARM 165-820</option>
<option value="165-920">ARM 165-920</option>
<option value="180-520">ARM 180-520</option>
<option value="180-670">ARM 180-670</option>
<option value="180-820">ARM 180-820</option>
<option value="180-920">ARM 180-920</option>
<option value="200-520">ARM 200-520</option>
<option value="200-670">ARM 200-670</option>
<option value="200-820">ARM 200-820</option>
<option value="200-920">ARM 200-920</option>
</select>
</td>
<td>
<select>
<option value="">Perf Type</option>
<option value="dd">DD</option>
<option value="7d">7D</option>
<option value="5s">5S</option>
<option value="dmd">DMD</option>
</select>
</td>
<td>
<select>
<option value="">Length</option>
<option value="675">675</option>
<option value="775">775</option>
<option value="875">875</option>
<option value="975">975</option>
<option value="1075">1075</option>
<option value="1175">1175</option>
<option value="1275">1275</option>
<option value="1375">1375</option>
<option value="1475">1475</option>
<option value="1575">1575</option>
<option value="1675">1675</option>
<option value="1775">1775</option>
<option value="1875">1875</option>
<option value="1975">1975</option>
<option value="2075">2075</option>
<option value="2175">2175</option>
<option value="2275">2275</option>
<option value="2375">2375</option>
<option value="2475">2475</option>
<option value="2575">2575</option>
<option value="2675">2675</option>
<option value="2775">2775</option>
<option value="2875">2875</option>
<option value="2975">2975</option>
<option value="3075">3075</option>
<option value="3175">3175</option>
</select>
</td>
</tr>
</tbody>
</table>
<button type="button" onclick="displayResult()">Insert Another Row</button><br><br>
</div>
<script type="text/javascript">
function displayResult() {
document.getElementById("lst-table").insertRow(-1).innerHTML = '<td>1</td><td>2</td><td>3</td>'
}
</script>Below is an image of how the table currently looks.
Any help on this would be greatly appreciated.
>Solution :
try this…
document.getElementById("lst-table").insertRow(-1).innerHTML = document.getElementById("lst-table").rows[1].innerHTML;
May be beneficial to ready up on jquery will make life a whole bunch easier.