javascript - Zebra 条带化到一个表列

Question

我有一个表，它对表行使用表排序器和斑马条纹。我想在其中一个表 COLUMNS 中添加斑马条纹，以稍微强调一下。像这样：

Answer 1

如果您知道要条带化的列索引，则只能在 CSS 中使用 :nth-of-type 选择器，如下所示：

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

Answer 2

检查这个链接

这可以使用 jQuery 来完成，而无需提供类名或 id。

 $('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 选择器的更多信息，请访问此链接

Answer 3

对于该列中的 TD，您需要一个额外的类名和相应的 CSS 声明。