Copy Internal Table value to External table on checkbox click

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

2

Checkboxes allow more than one checkbox from each group to be selected.

If only one set of price/quantity is allowed to be used at a time, you really must use radio buttons instead which allow only one to be selected at a time.

3

You’re table structure has made things trickier than normal, but it can certainly be done, as is demonstrated in the following fiddle: https://jsfiddle.net/p2179dhv/1/

rows = document.querySelector("table tbody").children;
Array.from(rows).forEach(function (row) {
	row.addEventListener("click", function (evt) {
    var price = row.querySelector("[name=price]");
    var quantity = row.querySelector("[name=quantity]");
    var radio = evt.target;
    var radioRow = radio.parentNode.parentNode;
    price.value = radioRow.querySelector("td").innerText;
    quantity.value = radioRow.querySelector("td:nth-of-type(2)").innerText;
  });
});

Please remember, that a checkbox tells people that multiple things can be selected, and radio buttons tell people that one of each type can be selected.

4 
<!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>
        <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>
5

Thanks a lot its perfectly what i need

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.