0

关于使用 jquery遍历与向页面添加额外平面内容的速度/效率的问题：

我有一个包含一组数据的表，其中每行包含第一个单元格中的文本，然后是该文本的时间值。我将使用Highcharts来允许用户查看每行中的值的图表。每行都有一个链接，用于在模式弹出框中启动图表。这个表可能有几十到几百行和最多 20 列。

该表将如下所示：

<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>
    ....

要获取位置名称和每月值以创建折线图，我可以使用 jquery 在用户单击时获取值.view-chart并将它们放入 Highcharts 所需的格式。使用这样的东西：

$('.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));
  });
});

或者我可以简单地创建一个包含所有值的某种隐藏元素，然后点击它们：

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

所以我的问题是为此目的哪种方法更快/更有效？我是否应该向页面本身添加额外的平面代码，以易于使用的格式包含所有相关数据？还是缩短页面并让jquery在点击时解析更好？

我想两者都可以正常工作，但是如果表格增长到数千行或数百列怎么办？

4

1 回答 1

1

您甚至没有想到的最佳.paris方法（我认为）是制作,.london等类，您可以选择并获得所需的所有数字。

<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>
....

所以选择：

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

或者获取所有这些：

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;
});

小提琴：http: //jsfiddle.net/maniator/YJSg4/

于 2012-12-13T20:07:26.920 回答