6

行の展開と折りたたみ、列の並べ替えが可能なテーブルがあります。以下は私のコードです。パフォーマンスを向上させる方法はありますか。そして、行の完全なグループを dom に追加するとパフォーマンスが向上しますが、$.each() ループの外で行うとエラーがスローされます。 テーブルデモ

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

リンクテキスト

4

3 に答える 3

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

考慮すべきもう1つのことは、CSSだけでサブセクションの異なるスタイルを取得できるかどうかです.JSでは、奇数/偶数クラスの適用についてのみ心配する必要があります. CSS は次のようになります。

.odd { background-color: blue; }
.even { background-color: white; }
.sub .odd { background-color: green; }
.sub .even { background-color: yellow; }
于 2009-06-11T07:45:09.953 に答える
2

チュートリアル:ゼブラ ストライピングを jQuery から簡単に作成する方法は、ゼブラ ストライピングを行う方法に関する優れたチュートリアルです。

于 2009-06-11T06:46:50.067 に答える
0

あなたは各ループの中にいます、これをしてください：

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

       if(index % 2 == 0)
       {
            row.addClass("AltRow");
       }
)};
于 2012-07-13T05:38:30.097 に答える