2

明らかに、奇数/偶数行の実際のスタイルは CSS クラスを介して行われますが、クラスを行に「アタッチ」する最良の方法は何ですか? マークアップに入れる方が良いですか、それともクライアント側のJavaScriptを介して行う方が良いですか? どちらが優れているのか、その理由は?

簡単にするために、これが 100 行の大きなテーブルであり、配色が奇数行と偶数行が交互になっていると仮定します。さらに、これを簡単に実行できる何らかの JavaScript ライブラリがページの他の場所で必要になるため、そのパッケージのオーバーヘッドは問題になりません。

この質問の本当の目的は、どのようなトレードオフが関係しているのか、またそれらのトレードオフをどのように処理する必要があるのか​​を判断することです。たとえば、ページが負荷の下でヒットした場合 (動的テーブルを想定)、帯域幅がヒットした場合のサーバーへのパフォーマンス ヒットなどです。接続速度が遅いユーザー向けに、HTML に追加のレイアウト コードを追加することによるセマンティック ヒット (ここでの考え方は、HTML はコンテンツ用、CSS はレイアウト用、javascript はコンテンツの動作方法とレイアウトの制御/拡張用です)

4

12 に答える 12

6

マークアップ（サーバー側）に入れます。サーバーが完了するのに 1 ミリ秒もかかりませんrowNum = (rowNum - 1) * -1。JavaScript の実行量が原因で Web サイトの速度が低下するのは、私の不満です。

于 2009-01-23T19:49:19.123 に答える
1

クライアントでJavaScriptが有効になっていない可能性があるため、最初はサーバー側でこれを行います。クライアント側で JavaScript を使用して行を追加/削除する場合は、追加/削除イベントが完了した後にクライアントで行を追加/削除することもできます。ブラウザ環境を制御できない場合 (たとえば、有効にする必要があるイントラネット アプリなど) を除き、できるだけ Javascript を使用せずにインターフェイスが適切に動作するようにする必要があります。

于 2009-01-23T20:05:43.833 に答える
1

いつの日か、純粋な CSSだけを使用できるようになるでしょう。もちろん、CSS 仕様のこの部分は2001 年に導入されたもので、まだサポートされていません。=(

于 2009-01-23T20:09:03.997 に答える
1

あなたが達成しようとしていることは、CSS3 でも実行できます。

tr:nth-child(odd) { background: #FFF; }
tr:nth-child(even) { background: #AAA; }

これは、w3 の css3 セレクター仕様にも記載されています。互換性を探している場合は、サーバー側または JavaScript を介してクラスを追加する方がはるかに優れたソリューションです。

于 2009-01-23T20:10:53.540 に答える
1

このような大きなサイズのテーブルの場合、サーバー側で行処理を行い、PHP などを使用して各行の奇数/偶数クラス名を計算します。このソリューションは、JavaScript がオフになっている場合でも機能し、このサイズのテーブル要素を処理する JavaScript ライブラリよりもはるかに高いパフォーマンスを発揮します。

PHPでは、ロジックは次のようになります

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

サーバー側の処理を実行できない場合は、スタイルを直接操作するのではなく、JavaScript で各行のクラス タグを設定することをお勧めします。このように、プレゼンテーションは CSS に任せ、動作は JavaScript に任せます。後でクラスの生成方法を変更しても、プレゼンテーション コードは同じままです。

于 2009-01-23T19:48:29.123 に答える
0

jqueryを使用して達成したいことを説明している良いサイトを見つけました：

これが最終的な出力です - http://15daysofjquery.com/examples/zebra/code/demoFinal.php

そして、ここにチュートリアルがあり ます - http://15daysofjquery.com/examples/zebra/

于 2009-01-23T19:58:22.817 に答える
0

状況によるとしか言いようがありません。サーバー側で行を作成するためにデータをループしている場合は、おそらくそこで行うべきだと思います。

クライアント側スクリプトを使用して行を並べ替え/並べ替える場合、これはさらに複雑になります。この場合、100 行程度の場合は、onload イベント クライアント側で実行する傾向があるかもしれません。これは、少なくとも行の色を決定するコードを複製しないためです。認めますが、この場合は速度に大きく依存します。最終決定を下す前に、おそらく試してみて、パフォーマンスが許容できるかどうかを確認します.

于 2009-01-23T20:01:18.647 に答える
0

シナリオによって異なります。テーブルがオンザフライで作成されていない場合は、JavaScript ベースの方が多くの行を実装する方が速い場合があります。ただし、テーブルを動的に作成している場合は、他のすべての行のクラスを「row_alternate」に設定するのは非常に簡単です。JavaScript を使用していないユーザーがいる可能性がある場合は、サーバー側の方法をお勧めします。

于 2009-01-23T19:49:58.310 に答える