<!DOCTYPE html>
<html>
<body>
<table border=”1px”>
<tr>
<td>
<input type=”text” name=”price” label=”Price” class=”pri”>
<input type=”text” name=”quantity” label=”Quantity” class=”qty”>
</td>
<td>
<table border=”1px”>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td><input type=”checkbox” class=”checx” /></td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>10</td>
<td>20</td>
<td><input type=”checkbox” class=”checx” /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type=”text” name=”price” label=”Price” class=”pri”>
<input type=”text” name=”quantity” label=”Quantity” class=”qty”>
</td>
<td>
<table border=”1px”>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>3</td>
<td>4</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>33</td>
<td>44</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>333</td>
<td>444</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>30</td>
<td>40</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type=”text” name=”price” label=”Price” class=”pri”>
<input type=”text” name=”quantity” label=”Quantity” class=”qty”>
</td>
<td>
<table border=”1px”>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td><input type=”checkbox” class=”checx” /></td>
</tr>
<tr>
<td>55</td>
<td>66</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>555</td>
<td>666</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>50</td>
<td>60</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<input type=”text” name=”price” label=”Price” class=”pri”>
<input type=”text” name=”quantity” label=”Quantity” class=”qty”>
</td>
<td>
<table border=”1px”>
<tr>
<th>Price</th>
<th>Quantity</th>
<th>Action</th>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>77</td>
<td>88</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>777</td>
<td>888</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
<tr>
<td>70</td>
<td>80</td>
<td><input type=”checkbox” class=”checx”/></td>
</tr>
</table>
</td>
</tr>
</table>
//Javascript
<script type=”text/javascript”>
checkboxes = document.getElementsByClassName(“checx”);
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName(“td”)[1];
var FirstColumn = currentRow.getElementsByTagName(“td”)[0];
alert(“My text is: ” + secondColumn.textContent +” “+FirstColumn.textContent);
document.getElementsByClassName(“Pri”).value=secondColumn.textContent;
document.getElementsByClassName(“Qty”).value=FirstColumn.textContent;
};
}
</script>
</body>
</html>
I have a dynamic table on the above pattern.I want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
Thanks for your help in advance
