Question

Question about the speed/efficiency of using jquery traversal vs adding extra flat content to a page:

I have a table with a set of data where each row contains text in the first cell and then values of time for that text. I’m going to use Highcharts to allow users to view charts for the values in each row. There’s a link on each row to launch a chart within a modal popover. This table may have anywhere between a few dozen and to a few hundred rows and up to 20 columns.

The table will look something like this:

<table>
  <thead>
    <tr>
      <th>Graph</th><th>Location</th><th>Jan</th><th>Feb</th><th>Mar</th><th>Apr</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#" class="view-chart">View</a></td><td>Paris</td><td>14</td><td>22</td><td>18</td><td>16</td>
    </tr>
    <tr>
      <td><a href="#" class="view-chart">View</a></td><td>London</td><td>32</td><td>24</td><td>22</td><td>27</td>
    </tr>
    ....

To get the location name and the monthly values to create a line graph, I could either use jquery to grab the values when the users clicks on .view-chart and put them in the format needed by Highcharts. Using something like this:

$('.view-chart').click(function() {
  var series = { data: [] };
  var graphTitle = $(this).parent().next().text();
  var tds = $(this).parent().next().nextAll();
  $.each(tds, function(index, item) {
    series.data.push(parseFloat(item.innerHTML));
  });
});

Or I could simply create a some sort of hidden element with all the values and then grab those on click:

<div style="display: none">
  <div id="paris">14,22,18,16</div>
  <div id="london">32,24,22,27</div>
</div>

So my question is which approach is faster/more efficient for this purpose? Should I add extra flat code to the page itself that contains all relevant data in an easy to use format? Or is it better to shorten the page and let jquery parse on click?

I imagine either will work fine, but what if the table grows to thousands of rows or hundreds of columns?

Answer 1

The best approach (I think) that you did not even think of is making .paris, .london, etc classes that you can just select on and get all of the numbers that you need.

<tr>
  <td><a href="#" class="view-chart">View</a></td><td>Paris</td><td class='paris'>14</td><td class='paris'>22</td><td class='paris'>18</td><td class='paris'>16</td>
</tr>
<tr>
  <td><a href="#" class="view-chart">View</a></td><td>London</td><td class='london'>32</td><td class='london'>24</td><td class='london'>22</td><td class='london'>27</td>
</tr>
....

So selecting:

var paris = $('.paris');
var parisArray = [];
paris.each(function(){
    parisArray.push(this.innerText);
});

Or to get all of them:

var allElements = {};
$('.view-chart').each(function(){
   var tableRow = $(this).parents('tr');
   var rowName = $('td', tableRow).eq(1).text().toLowerCase();
   var place = $('.' + rowName);
   var placeArray = [];
   place.each(function(){
        placeArray.push(this.innerText);
   });
   allElements[rowName] = placeArray;
});

Fiddle: http://jsfiddle.net/maniator/YJSg4/