2

各テーブル行にあるカスタム属性値のCSVリストに基づいて並べ替えるhtmlテーブルがあります。私はそれを行うために次の関数を使用しています：

for (var i = 0; i < arrCSV.length; i++)
{
  $('#' + tableId)
      .find('[fname = ' + arrCSV[i] + ']')
      .eq(0)
      .parents('tr')
      .eq(0)
      .appendTo('#' + tableId);
}

テーブル構造は次のとおりです。

<table>
<tr>
 <td fname='f1'>something here</td>
</tr>
<tr>
 <td fname='f2'>something here</td>
</tr>
</table>

CSVは、「f2、f1」のようになります。

これは非常にパフォーマンスの遅い関数だと思います。それを最適化するのにどんな助けでも本当にありがたいです。

編集： http：//www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctlyの記事に基づいて、HTMLを連結してappendを1回だけ呼び出すことで、パフォーマンスを最大に向上させることができます。ストリング。誰かが私の問題にこのテクニックを使うのを手伝ってもらえますか？forループでsHTMLを取得し、それを1回追加する方法がわかりません。

4

4 に答える 4

1

できるだけ少ない回数で要素を見つけることをお勧めします。対象の属性値をキーとして使用して、一致するすべての行を「ハッシュ」に格納します。CSVを確認し、ハッシュから対応する行を選択して配列にプッシュし、最後に、以前に見つかったjQueryオブジェクトを使用して配列の要素をテーブルに追加します。

var table = $('#' + tableId);
var rowHash = {};
table.find('[fname]').each( function() {
    rowHash[$(this).attr('fname')] = $(this).closest('tr');
});
var rows = [];
for (var i = 0; i < arrCSV.length; ++i)
{
    var row = rowHash[arrCSV[i]];
    if (row) {
       rows.push(row);
    }
}
$(rows).appendTo(table);

編集：これは、見つかったときに各行をテーブルに追加していた以前のコードを少し改善したようです。1000行のテーブルでテストしましたが、完全に反転する必要があるテーブルを並べ替えるのに約1秒かかるようです。

于 2009-07-01T15:20:38.637 に答える
1

HTMLを1回だけ追加したい場合（learningjquery.comの記事のように）、次のことを試してください。

$(document).ready(
function()
{
   var arrCSV = ['f2', 'f1'];
   var tableId = 'mainTable';
   var newTable = [];
   for (var i = 0; i < arrCSV.length; i++)
   {
      var row = $('#' + tableId)
                .find('[fname = ' + arrCSV[i] + ']')
                .eq(0)
                .parents('tr')
                .eq(0);

      newTable.push(row.html());
   }                    

   $('#' + tableId).html(newTable.join(''));
};
});

ライブバージョン： http： //jsbin.com/uwipo コード： http： //jsbin.com/uwipo/edit

個人的には、最初にコードのプロファイルを作成して、追加が遅いかどうか、または「find」メソッド呼び出しかどうかを確認する必要があると感じています。巨大なテーブルの場合、「findmethod」を使用してカスタム属性を見つけるのは遅くなる可能性があると思います。しかし、繰り返しになりますが、当て推量には意味がありません。コードのプロファイルを作成して見つけてください。

'find'メソッドが遅い場合、カスタム属性を与える代わりにtdでid属性を使用することは可能でしょうか。

例えば

<table>
<tr>
   <td id='f1'>something here</td>
</tr>
<tr>
   <td id='f2'>something here</td>
</tr>
</table>

次に、親行を見つけるためのコードは次のように単純になります。

  ('#' + arrCsv[i]).parent('tr')

編集： tvanfossonが指摘しているように、このコードはarrCSVにすべての行の属性が含まれていることを前提としています。ファイナルテーブルには、arrCSVに存在する行のみが含まれます。また、このコードは元のテーブルから「thead」、「tfoot」セクションをコピーしませんが、コピーするコードは簡単に記述できるはずです。

于 2009-07-01T16:27:12.367 に答える
0

アルゴリズムを再考する必要があるかもしれません。

アルゴリズムを変更しない場合、わずかな最適化は次のようになります。

var $table = $("#" + tableId);

for (var i = 0; i < arrCSV.length; i++)
{
  $('[fname = ' + arrCSV[i] + ']:first',$table).closest('tr').appendTo($table);
}
于 2009-07-01T15:00:22.703 に答える
0

一瞬待って...

$('#' + tableId)

#myTableを取得する

.find('[fname = ' + arrCSV[i] + ']')

fnameの属性がiに等しいものを検索します

.eq(0)

前の表現の最初の項目をください

.parents('tr')

タイプTRの親を検索します

.eq(0)

前の表現の最初の表現をください

.appendTo('#' + tableId);

そのTRを#myTableに追加します

わかった。分解したので、テーブル行のみを複製していますか？もしそうなら、.append（）はあなたの問題ではなく、セレクターの選択はあなたの問題です。ここで私の混乱をさらに悪化させるために、fnameの属性を持つ唯一のタグはあなたのTRです、それでなぜあなたは彼らのparents（）に行き、最初のTRを探すのですか？基本的に、TRタグをTRタグ内に配置するように求めていますが、それはマークアップの例が示しているものではありません。

于 2009-07-01T15:02:11.450 に答える