How to get table value with jQuery, run PHP function then append result to table.

Question

1: I'm loading a table onclick as follows:

$(document).ready(function() { 
  $("#myTable").tablesorter(); 
    $("#ajax-append").click(function() { 
      $.get("get_data.php", function(html) { 
        $("#myTable tbody").append(html);              
        $("#myTable").trigger("update"); 
      }); 
    return false; 
  });         
}); 

2: The table populates three columns as follows:

<table id="myTable">             
  <thead>
    <tr> 
      <th class="header">header 1</th> 
      <th class="header">header 2</th> 
      <th class="header">header 3</th> 
    </tr> 
  </thead> 
  <tbody>  
    <tr>
      <td id="col1_1">value 1</td>
      <td id="col2_1">value 2</td>
      <td id="col3_1"></td>
    </tr>
    <tr>
      <td id="col1_2">value 1</td>
      <td id="col2_2">value 2</td>
      <td id="col3_2"></td>
    </tr>
  </tbody>
</table>

...etc (100's of rows... )

1. Once the table is loaded - I'd like to get the value of col1 and pass it into a function ie/ get_result.php?data=col1 and put this into col3 for the entire table using jQuery and showing a loading gif for each row while the function runs...

Can anyone get me started how I could achieve this. Thanks!

Answer 1

you can send col1 data from your table loading callback and insert into each col3 after you get the result, or you can execute a foreach in the callback and get result for col3 one by one (not recommend)

the loading gif can be pre-generated in col3 and be replaced later.

i would recommend computing/pre-computing the full table data at server side and get the table with one load call.