2009-06-11 7 views
6

私は行の展開と折りたたみを持つ表を持ち、列はソート可能です。 以下は私のコードですが、パフォーマンスを向上させる方法はありますか? DOMに行の完全なグループを追加して読み込むとパフォーマンスが向上しますが、$ .each()ループから抜けるとエラーになります。 jQueryのから teble demojquery内の代替の行の色付け

var alt = true; 
var altSub = true; 

$.each(myData, function(index, row) { 

    var noRow = $(row).length; 
    var firstRow = $(row[0]); 

    for (var i=0; i < noRow; i++) { 
     if(firstRow.attr('id') == $(row[i]).attr('id')) { 
      if(alt == true) { 
       firstRow.removeClass("odd").addClass("even"); 
       alt = !alt; 
       altSub = true; 
      } else if(alt == false) { 
       firstRow.removeClass("even").addClass("odd"); 
       alt = !alt; 
       altSub = true; 
      } 
     } else { 
      if(altSub == true) { 
       $(row[i]).removeClass("alt_row_sub").addClass("alt_row_sub2"); 
       altSub = !altSub; 
      } else if(altSub == false) { 
       $(row[i]).removeClass("alt_row_sub2").addClass("alt_row_sub"); 
       altSub = !altSub; 
      } 
     } 
    } 
    $table.children('tbody').append(row); 
}); 

link text

+0

は、あなたのテーブル – Natrium

+1

の大きなデモを提供してください、なぜこれはコミュニティのwikiですか?それは完璧な良い質問です。 – Natrium

+0

@Natrium - 画像を更新しました。 – vinay

答えて

2

Tutorials:Zebra Striping Made Easyゼブラストライピングを行う方法に大きなチュートリアルです。

+0

このゼブラストライピングは私の場合に適用されます。あなたが私のデモイメージを見れば、それはアイデアを与えます。私のテーブルは崩壊して拡大しています。 – vinay

+0

私はかつて「パジャマ・ストライピング」と呼ばれる人を聞いたことがあります:-) – Natrium

+0

銀河へのヒッチキーのガイドからの引用を思い出しました。それは簡単でした。マンは言う。そして、アンコールは黒が白であることを証明するそして、次のゼブラ交差点で 自身が殺されるようになる。 " –

15

:even:oddセレクタが便利です。

あなたは、このようにそれらを使用することができます。

$('.stripyTable tr:even').addClass('even'); 
$('.stripyTable tr:odd').addClass('odd'); 
$('.stripyTable .submenu tr:even').addClass('alt_row_sub'); 
$('.stripyTable .submenu tr:odd').addClass('alt_row_sub2'); 

考慮すべき他の事は、あなたのJSであなただけの適用を心配する必要がある、あなただけのCSSでのサブセクションの異なるスタイリングを得ることができるかどうかであります奇数/偶数クラス。 CSSのようなものに見えるかもしれません:あなたは、各ループの内側にある

.odd { background-color: blue; } 
.even { background-color: white; } 
.sub .odd { background-color: green; } 
.sub .even { background-color: yellow; } 
+0

あなたの返事をありがとうが、正しく機能していない。それはこのように見えます。http://www.freeimagehosting.net/uploads/da55af5e55.gif – vinay

+1

私はあなたが間違って見えるようにストライピングを引き起こしているいくつかの隠し行があると思います。しかし、あなたのソースを見ることなく、それを引き起こすものを見るのは難しいです。ストライピングを適用するときに:visibleセレクタを使用すると役立ちます。 – thatismatt

+1

ここに私の要点を説明してくれるコードがあります:http://jsbin.com/iwuqe – thatismatt

0

を、次の操作を行います。

$.each(myData, function(index, row) { 

     if(index % 2 == 0) 
     { 
      row.addClass("AltRow"); 
     } 
)}; 
関連する問題