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-chartHighcharts で必要な形式に変換します。次のようなものを使用します。

$('.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 に答える