CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-apps-script
Paul Pagente
Paul Pagente

Reputation: 45

Transfer Table TD in textbox

This is the way on how I populate data in my table.

<script>
function GenerateTable() {
    <? var data = getData(); ?> 

    var table = document.getElementById("TableContainer");

    <? for (var i = 12; i < data.length; i++) { ?>
      var getval;
      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ <?= data[i][0] ?> + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ <?= data[i][1] ?> +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + <?= data[i][2] ?>  +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + <?= data[i][3] ?>  +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + <?= data[i][4] ?>  +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +<?= data[i][5] ?>  +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ <?= data[i][6] ?>  +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src="https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

<? } ?>
}
</script>

and this is my table where i put the data based on code above.

<table  id = "TableContainer" cellspacing="2" cellpadding="3" width ="100%" align = "center" class="hoverTable">
   <tr>
   <th  bgcolor = "darkgreen"><font color="white">#</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Area</font></th>
   <th  bgcolor = "darkgreen" width = "200px"><font color="white">Customer Name</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Person In Charge</font></th>
   <th  bgcolor = "darkgreen" width = "250px"><font color="white">Remarks</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Status</font></th>
   <th  bgcolor = "darkgreen"><font color="white">Doc. Date</font></th>
   <th  bgcolor = "darkgreen"></th>
   </tr>
   <tr>

   </tr>
</table>

Please bear with me. this code is perfectly running and im running the code by '<body onLoad = "GenerateTable()"> how ever as what you see on my code there is a code that looks like this. 

<td><img id = "selectdata" class = "click-to-select" src="https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

now it will create an image button for every row in my table and that code has a purpose and that is to transfer the data from td to textbox and other elements and here is my code for that.

<script>
$('.click-to-select').click(function() {
    var dataid = $(this).closest('tr').find('td.dataid').text();
    var area = $(this).closest('tr').find('td.area').text();
    var cusname = $(this).closest('tr').find('td.cusname').text();
    var cicoption = $(this).closest('tr').find('td.cic').text();
    var remarks = $(this).closest('tr').find('td.remarks').text();
    var statoption = $(this).closest('tr').find('td.status').text();
    var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});
</script>

this is where the error starts when im clicking the image the row data is not transferring in my textbox whats the error?

Updated Code 

<script>
function GenerateTable() {
    <? var data = getData(); ?> 

    var table = document.getElementById("TableContainer");

    <? for (var i = 12; i < data.length; i++) { ?>
      var row = table.insertRow(-1);
      var row_did = row.insertCell(0);
      var row_area = row.insertCell(1);
      var row_cusname = row.insertCell(2);
      var row_pic = row.insertCell(3);
      var row_remarks = row.insertCell(4);
      var row_status = row.insertCell(5);
      var row_docudate = row.insertCell(6);
      var row_button = row.insertCell(7);

      row_did.innerHTML =      '<td  id="dataid" class="dataid">'+ <?= data[i][0] ?> + '</td>';
      row_area.innerHTML =     '<td  id="area" class="area">'+ <?= data[i][1] ?> +'<td>';
      row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' + <?= data[i][2] ?>  +'<td>';
      row_pic.innerHTML =      '<td  id ="cic" class="cic">' + <?= data[i][3] ?>  +'<td>';
      row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + <?= data[i][4] ?>  +'<td>';
      row_status.innerHTML =   '<td  id ="status" class="status">' +<?= data[i][5] ?>  +'<td>';
      row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+ <?= data[i][6] ?>  +'<td>';
      row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src= "https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

<? } ?>

$('.click-to-select').click(function() {
    var dataid = $(this).closest('tr').find('td.dataid').text();
    var area = $(this).closest('tr').find('td.area').text();
    var cusname = $(this).closest('tr').find('td.cusname').text();
    var cicoption = $(this).closest('tr').find('td.cic').text();
    var remarks = $(this).closest('tr').find('td.remarks').text();
    var statoption = $(this).closest('tr').find('td.status').text();
    var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});

}
</script>

TYSM

Upvotes: 2

Views: 117

Answers (3)

vjy tiwari
vjy tiwari

Reputation: 861

I think , This function should be like below Don't use the php tags because these are javascript variables . 

function GenerateTable() {
   var data = getData();  

   var table = document.getElementById("TableContainer");

  for (var i = 12; i < data.length; i++) { 
     var row = table.insertRow(-1);
     var row_did = row.insertCell(0);
     var row_area = row.insertCell(1);
     var row_cusname = row.insertCell(2);
     var row_pic = row.insertCell(3);
     var row_remarks = row.insertCell(4);
     var row_status = row.insertCell(5);
     var row_docudate = row.insertCell(6);
     var row_button = row.insertCell(7);

  row_did.innerHTML =      '<td  id="dataid" class="dataid">'+  data[i][0]  + '</td>';
  row_area.innerHTML =     '<td  id="area" class="area">'+  data[i][1] +'<td>';
  row_cusname.innerHTML =  '<td  id ="cusname" class="cusname">' +  data[i][2]   +'<td>';
  row_pic.innerHTML =      '<td  id ="cic" class="cic">' +  data[i][3]   +'<td>';
  row_remarks.innerHTML =  '<td  id ="remarks" class="remarks">' + data[i][4]  +'<td>';
  row_status.innerHTML =   '<td  id ="status" class="status">' + data[i][5]   +'<td>';
  row_docudate.innerHTML = '<td  id ="docdate" class="docdate">'+  data[i][6]   +'<td>';
  row_button.innerHTML =   '<td><img id = "selectdata" class = "click-to-select" src= "https://docs.google.com/uc?id=0By6kUPbaVMWCbUI0LTJTR2g2N3M" alt="Submit" width="13px" height="13px" title = "Edit Selected Data" data-toggle="modal" data-target="#myModal"/></td>';

    } 

$('.click-to-select').click(function() {
   var dataid = $(this).closest('tr').find('td.dataid').text();
   var area = $(this).closest('tr').find('td.area').text();
   var cusname = $(this).closest('tr').find('td.cusname').text();
   var cicoption = $(this).closest('tr').find('td.cic').text();
   var remarks = $(this).closest('tr').find('td.remarks').text();
   var statoption = $(this).closest('tr').find('td.status').text();
   var documentdate = $(this).closest('tr').find('td.docdate').text();

    $('#dataid').val(dataid)
    $('#areaoption').val(area)
    $('#cusname').val(cusname)
    $('#cicoption').val(cicoption)
    $('#remarks').val(remarks)
    $('#statoption').val(statoption)
    $('#documentdate').val(documentdate)
});


}

Hopefully , it may help you .

Upvotes: -1

Ritesh Nair
Ritesh Nair

Reputation: 3355

First you need to remove the id from td because some of it matches with textbox element.

Then replace it with below line of code and do the same for each column.

var dataid =  $(this).parent().siblings('.dataid').text();

Upvotes: 0

Alex Griffis
Alex Griffis

Reputation: 728

Could you put your second script $('.click-to-select').click(function(){...}) inside of GenerateTable() and after the for loop? Then check if the click handler is running by putting console.log('The dataid is:' + dataid) in here.

$('.click-to-select').click(function(){...
  ...
  var documentdate = $(this).closest('tr').find('td.docdate').text();

  console.log('The dataid is:' + dataid)

  $('#dataid').val(dataid)
  ...
}

I can't tell for sure the order that your code executes because you have two separate script tags here, but it's possible your second script can't bind the click handler because the .click-to-selects haven't been created yet by GenerateTable().

Here is a working fiddle using nth-of-type selectors

Upvotes: 2

Related Questions