1

テーブル行に tablesorter とゼブラ ストライピングを使用するテーブルがあります。テーブル COLUMNS の 1 つだけにゼブラ ストライプを追加して、少し強調したいと思います。このような:

私がやろうとしていることの一般的な考え

4

3 に答える 3

7

ストライプしたいものの列インデックスがわかっている場合は、次のように :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

于 2012-10-03T17:16:51.830 に答える
3

このリンクを確認してください

これは、クラス名や 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 セレクターの詳細については、このリンクを参照してください

于 2012-10-03T17:20:07.510 に答える
0

その列の TD には、追加のクラス名と対応する CSS 宣言が必要です。

于 2012-10-03T17:15:05.000 に答える