JavaScript for HTML :: I want to show multiple data into multiple filed for each Table Row

Question

I want to show all data from each row into form filed. When I will click each row link then it will show each row data. But my javascript is not working well.

my code ::

    $('.cmcodedt').click(function(){
   var a = document.getElementById('cmcodedt').innerHTML; 
   var b = document.getElementById('cmnamedt').innerHTML; 
   var c = document.getElementById('ppunitdt').innerHTML; 
   var d = document.getElementById('ppunitqtydt').innerHTML;
   var e = document.getElementById('ppquantity').innerHTML; 
   var f = document.getElementById('pppurchasratedt').innerHTML; 
   var g = document.getElementById('pptotalamountdt').innerHTML; 


   document.getElementById('111').value= a;
   document.getElementById('222').value= b;
   document.getElementById('333').value= c;
   document.getElementById('444').value= d;
   document.getElementById('555').value= e;
   document.getElementById('666').value= f;
   document.getElementById('777').value= g;
  return false;
});

here is my screen::

My question ::: How do I show each row data when I click "1111" or "product code" ?? It is working for single row only even I click another row.

Please help me. Note that I am learning javascript.

Answer 1

Most likely you are having an issue with assignment in the first part:

    ...
   var a = document.getElementById('cmcodedt').innerHTML; 
   var b = document.getElementById('cmnamedt').innerHTML; 
   var c = document.getElementById('ppunitdt').innerHTML; 
   var d = document.getElementById('ppunitqtydt').innerHTML;
   var e = document.getElementById('ppquantity').innerHTML; 
   var f = document.getElementById('pppurchasratedt').innerHTML; 
   var g = document.getElementById('pptotalamountdt').innerHTML; 
    ...

Notice the id here is ppunitqtydt and I suppose that each row of your table has a td with that id, *right?*Well, as the word id indicates, it should only be assigned to one dom element.

Inside the code that execute click on cmcodedt, it won't know that which ppunitqtydt you are looking for so it will fetch the first one available, hence, wrong data. Therefore an easy way to do it is to make ppunitqtydt as a class, and then access that class in relevance to the clicked elementcmcodedt. In other words, if cmcodedt is clicked, then find the next sibling to it that has the class ppunitqtydt or ppquantity or etc.

If that is the case, then use something like

var a = this.nextAll(".cmcodedt").html();//this is the clicked element. 
$("#111").val(a);

I haven't tested this personally, but that will be one general approach.

Answer 2

You can do it using JQuery please check the fiddle WORKING FIDDLE EXAMPLE

HTML

<table class="myTable">
    <thead>
        <tr >
            <th>Product code</th>
            <th>Product name</th>
            <th>Unit</th>
            <th>Quantity</th>
            <th>Unit Quantity</th>
            <th>Purchase rate</th>               
            <th>Total ammount</th>               
        </tr>
    </thead>
    <tbody>
        <tr >
            <td>1111</td>
            <td>cmname_uu</td>
            <td>KLAX</td>
            <td>10</td>
            <td>132</td>
            <td>12.12</td>
            <td>1600</td>            
        </tr>
        <tr >
            <td>2222</td>
            <td>cmname_fr</td>
            <td>KLAX</td>
            <td>123</td>
            <td>44</td>
            <td>55.77</td>
            <td>543</td>            
        </tr>
        <tr >
            <td>3333</td>
            <td>cmname_gg</td>
            <td>KLAX_HBMC</td>
            <td>55</td>
            <td>74</td>
            <td>65.88</td>
            <td>556</td>            
        </tr>        
    </tbody>
</table>
<input id="product-code" type="text"/>
<input id="product-name" type="text"/>
<input id="unit" type="text"/>
<input id="quantity" type="text"/>
<input id="unit-quantity" type="text"/>
<input id="purchase-rate" type="text"/>
<input id="total-ammount" type="text"/>

JQUERY

UPDATE (Row select on click)

$(".myTable tr").click(function() {
    var tableData = $(this).children("td").map(function() {
        return $(this).text();
    }).get();

    //change row color on click
    $(".myTable tr").each(function(index, elem){
       $(elem).removeClass("active")
    })
    $(this).addClass("active");  

    $("#product-code").val($.trim(tableData[0]));
    $("#product-name").val($.trim(tableData[1]));
    $("#unit").val($.trim(tableData[2]));
    $("#quantity").val($.trim(tableData[3]));
    $("#unit-quantity").val($.trim(tableData[4]));
    $("#purchase-rate").val($.trim(tableData[5]));
    $("#total-ammount").val($.trim(tableData[6]));
});