bicycle_guy bicycle_guy - 4 months ago 25
Javascript Question

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.

Answer

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()

Comments