Search code examples
javascriptjqueryjquery-bootgrid

Iterate over rows in JQuery Bootgrid table and extract values?


I am trying to iterate over a list of items in a Jquery Bootgrid table and extract the values to be used elsewhere. Here is my pseudo code:

for (each row in or-table) {
  var code = the value in data-column-id="code";
  var latitude = the value in data-column-id="lat";
  var longitude = the value in data-column-id="long";
  
  Console.log("code: " + code);
  Console.log("latitude: " + latitude);
  Console.log("longitude: " + longitude);
}
<table id="or-table" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
  <thead>
    <tr>
      <th data-column-id="code" >Symbol Code</th>
      <th data-column-id="lat" >Latitude</th>
      <th data-column-id="long" >Longitude</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

I just want to loop through the rows in the table and save the values in the cells to a variable. I have been unable to find an example using Bootgrid.


Solution

  • You can loop through all the rows and access the elements there by which child it is.

       $("#or-table tr").each(function(i, row){
          var code = $(":nth-child(1)", row).html();
          var latitude = $(":nth-child(2)", row).html();
          var longitude = $(":nth-child(3)", row).html();
    
          Console.log("code: " + code);
          Console.log("latitude: " + latitude);
          Console.log("longitude: " + longitude);
        });
    

    If not that, add class to each cell type like .code_value, .lat_value, .lng_value and access them in each() as $(row).find(".code_value").html().
    Or find them by param name $(row).find("[data-column-id='code']").html()