jqueryイベントをテーブルの特定の範囲に適用する

Question

jqueryイベントをテーブルの特定の範囲に適用する

私はリピーターにテーブルを持っています。データはテーブルに入力され、ロードされるデータのタイプに応じて各行にクラスが割り当てられます。例えば：

 <table id="detail-table">
      <tr class="typeA">
           <td>Value</td>
      </tr>
      <tr class="typeB">
           <td>Value</td>
      </tr>
      <tr class="typeC">
           <td>Value</td>
      </tr>
      <tr class="typeB">
           <td>Value</td>
      </tr>
      <tr class="typeA">
           <td>Value</td>
      </tr>
 </table>

表は折りたたまれた表です。 typeAはヘッダー、typeBはtypeAの子、typeCはtypeBの子です。表の例では、typeAには2つの直接の子があり、最初の子にも子があります。

ユーザーがtypeAをクリックすると、2つのtypeB行が表示され、typeBに子がある場合は、typeC行が表示されるように展開されます。私はクリックでこれを行うイベントハンドラを持っています。

私は特定の値を持つ項目の完全な詳細展開（typeAにtypeC）を適用する必要があります。 typeAのセルの値がクエリ文字列から受け取った値と等しい場合、親とその親のすべての子に対してexpandイベントをトリガーする必要があります。私はすでにこれを行ういくつかのコードを持っています。しかし、私はそれがちょっとしたハックだと感じています。誰かに何か提案があったかどうか疑問に思っていましたか？ここまで私がこれまで持っていたことがあります。

 $(function() {
      var tableRows = $('#detail-table').find("tr:gt(0)");
      $(tableRows).each(function(i, val) {
           //ExpandValue is a value in my C# page.
           if ($.trim(val.cells[0].innerText) == '<%= ExpandValue %>'){
                expandRows(i);
           }
      }

      function expandRows(startIndex) {
          //Expand the first row, the typeA class
          //row that matches the value
           $(tableRows[startIndex]).trigger('expand');
           startIndex += 1;
           while($(tableRows[startIndex]).attr("class") != "typeA"){
                $(tableRows[startIndex]).trigger('expand');
                startIndex++;
           }
      }
 });

これにより、テーブルのすべての行が検索されます。次に、テーブル行の配列をループします。条件は、各行の最初のセルのinnerTextをチェックします。セルのinnerTextがExpandValueと一致する場合、ターゲット行が見つかりました。この行のインデックスをexpandRows関数に送信します。 expandRows関数では、startIndexの行を展開します。これはExpandValueと一致するtypeAクラスの行です。次にstartIndexを1だけインクリメントして次の行をポイントします。 whileループは各行のクラスをチェックします。次のtypeA行がヒットするまで、各行のexpandイベントをトリガーします。これは正しく動作し、各行を正しく展開します。しかし、もう一度、私はjqueryの新人です、そして、私はこれをより良い方法で達成するための多分方法があると感じます。何か案は？

0

追加された 06 2月 2012 〜で 05:18 著者 Tom

ビュー: 4

源

ru fr es pt de ar

2 答え

コードの上部でセレクタとループをスピードアップすることができます：

//instead of using a pseudo-selector, we can use the `slice()` function to get all but the first element returned
var $tableRows = $('#detail-table').find("tr").slice(1);

//this `for` loop will perform a lot faster than the `.each()` loop
for (var i = 0, len = $tableRows.length; i < len; i++) {
    if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
        expandRows(i);
    }
}

Here is a demonstration of how much faster a properly formatted for loop is than using jQuery's .each(): http://jsperf.com/jquery-each-vs-for-loops/2

yaのためのいくつかのドキュメントは次のとおりです：

また、 tableRows 変数はjQueryにラップしています。これは、最初からjQueryオブジェクトであるため不要です。

 $(function() {
      var $tableRows = $('#detail-table').find("tr").slice(1);
      for (var i = 0, len = $tableRows.length; i < len; i++) {
          if ($.trim($tableRows.eq(i).find('td').eq(0).text()) == '<%= ExpandValue %>') {
              expandRows(i);
          }
      }

      function expandRows(startIndex) {
          //Expand the first row, the typeA class
          //row that matches the value
           $tableRows.eq(startIndex).trigger('expand');
           startIndex++;
           while($tableRows.eq(startIndex).attr("class") != "typeA"){
                $tableRows.eq(startIndex).trigger('expand');
                startIndex++;
           }
      }
 });

私はこれが既にあなたが望むことをしているのかどうかはわかりませんが、 expandRows 関数では、何かを行う前に startIndex を1つ増やしてください。 for ループは expandRows（）関数をトリガーし、最初の行を対象とするゼロのインデックスを渡します（最初はセレクタから除外します）。

2

追加された 06 2月 2012 〜で 05:29 著者 Jasper

源

これは素晴らしく見えます。助けと余分な読書をありがとう。しかし、これは正しく動作していません。私は$ .trim（$ tableRows.eq（i）.find（ 'td'）.eq（0）.text（））のデバッグ時には常に空の文字列であると考えています。これは、セルテキストのブラウザの問題ですか？私は.innerTextと.textが特定のブラウザで異なっていると読んでいました。私はそれが役立つ場合は、Chromeでデバッグしています。ご協力ありがとうございました！

追加された 06 2月 2012 〜で 07:59, 著者 Tom, 源

気にしない、私はそれを得た。値のチェックは.find（ 'td'）を使用します。私の最初のセルは実際にはthです。ありがとう！

追加された 06 2月 2012 〜で 08:33, 著者 Tom, 源

著者 Malk · Answer 1 · 2012-02-06T05:45Z

$(function(){
  var $list = $('#detail-table tr.typeA:gt(0) > td:eq(0):contains("<%= ExpandValue %>")');
  for (var i = 0, len = $list.length; i < len; i++)
  {
     var $nextrows = $list[i].nextAll("tr");
     for (var x = 0, ilen = $nextrows.length; x < ilen; x++)
     {
        if ($nextrows[x].hasClass("typeA")) break;
        $nextrows[x].trigger('expand');
     }
  }
});