テーブルの 1 つの列のみにゼブラ ストライピング
-
13-12-2019 - |
質問
テーブルソーターとテーブル行にゼブラストライプを使用するテーブルがあります。表の列の 1 つにだけゼブラ ストライプを追加して、少し強調したいと思います。このような:
解決
ストライプ化したい列の列インデックスがわかっている場合は、次のように :nth-of-type セレクターを使用して CSS のみで実行できます。
tr:nth-of-type(even) td:nth-of-type(3) { background: rgba(0,0,0,0.1); }
(どこ 3
ターゲット列インデックスのプレースホルダーとして使用されています)
別のオプションは、ストライプ化する列のヘッダー (または最初の td) にクラスを配置し、JS を使用して同じ列内の他の td をストライプ化することです。
var col_to_stripe = $('th.stripe-this-one').index();
$('table.selectively-stripe').find('tr:odd')
.each(function() {
$(this).children('td')
.eq(col_to_stripe)
.css('background', 'pink');
});
純粋な CSS アプローチと同様に、必要な列インデックスを配置するだけで済むため、このクラスは必須ではありませんが、コードを明確にするためには、このクラスを使用した方が良いでしょう。
デモはこちら: http://jsbin.com/axutal/2/edit
他のヒント
これをチェックする リンク
これは、クラス名やIDを与えることなくjQueryを使用して行うことができます。
$('tr:odd td:nth-child(4)').css('background','#999999'); /* For odd td's */
$('tr:even td:nth-child(4)').css('background','#DDDDDD'); /* For even td's */
.
この jQuery selector この
その列のTDSの追加のクラス名と対応するCSS宣言が必要です。
所属していません StackOverflow