テーブル内の行を交互にスタイルする最良の方法は何ですか？

StackOverflow https://stackoverflow.com/questions/474216

  •  19-08-2019
  •  | 
  •  

質問

明らかに、奇数/偶数行の実際のスタイルはCSSクラスを介して行われますが、<！> quot; attach <！> quot;に最適な方法は何ですか？行へのクラス？それをマークアップに入れる方が良いですか、それともクライアント側のjavascriptを介して行う方が良いですか？どちらが良いですか？

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

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

役に立ちましたか？

解決

次のように、jQueryを使用してかなり簡単にこれを行うことができます。

$(function(){
    $('tr:even').addClass('alternateClass');
    $('tr:odd').addClass('mainClass');
});

1つの特定のテーブルでこれを行う場合、または「li」要素でも同様に行う場合は、セレクタをもう少し修飾できます。

これは、一部のサーバーサイド環境よりも、クライアントサイドのほうが少しきれいで読みやすいと思います

他のヒント

マークアップ（サーバー側）に配置しました。サーバーが完了するまでにかかる時間は1ミリ秒未満です。rowNum = (rowNum - 1) * -1実行中のJavaScriptの量が原因でWebサイトが遅い場合、それは私の厄介な作業です。

他の回答で述べたように、クライアント側の大きなテーブルでそれを行うと、サーバー側よりも遅くなり、ユーザーがjavascriptを無効にしている場合は動作しない可能性があります。

ただし、 jQuery のようなJSフレームワークを使用すると、非常に簡単になり、本当に魅力的です：

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

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

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

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

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

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

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

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

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

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

シナリオによって異なります。テーブルがオンザフライで作成されていない場合、JavaScriptベースの方が多くの行に対してより迅速に実装できます。ただし、テーブルを動的に作成する場合、他のすべての行のクラスを<！> quot; row_alternate <！> quot;に簡単に設定できます。 -一部のユーザーがJavaScriptを使用していないことが懸念される場合は、サーバーサイドの方法をお勧めします。

任意のタイプのフレームワークを使用している場合、これは通常、それらに含まれる最初の機能の1つです。

その他<！> quot; jscriptテーブルの色が交互に変わる<！> quot;技術への数十のリンクを取得しました。

（それはさておき、開発者が書いていないコードを信用できないのは残念です。）

クラスがページにストリーミング/追加されるときに常にサーバー側でクラスを適用しますが、クライアント側で再ソートを行う場合は、行を再分類する必要があります。

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

最終出力は次のとおりです- http://15daysofjquery.com/examples/zebra/code/demoFinal.php

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

私は本当に状況に依存すると言うでしょう。サーバー側で行を作成するためにデータをループしている場合、おそらくそこで行うべきだと思います。

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top