使用jquery在多表中着色第一行

Question

我正在使用此css代码：

.even{
    background: #E4ECF6;
}
.odd{
    background: #F3F7FB;
}
.firstrow{
    background-color: #599ECF;
}

我正在使用这个css jquery代码：

$(document).ready(function(){
$('table tr:even').addClass('even');
$('table tr:odd').addClass('odd');
$('table tr:first').addClass('firstrow');
});

此代码正确运行第一个表。但是，当我有两个或更高的表时，此代码可以着色第一个表的第一行。是更好的代码，用于着色所有表中的所有第一行？

Answer 1

尝试替换

$('table tr:first').addClass('firstrow');

与

$('table tr:first-child').addClass('firstrow');

关键是使用:first-child选择器，

  

选择所有父元素的第一个子元素。

现场演示here。

---

如果你仍然想要:first选择器，你可以这样做：

$(document).ready(function () {
  $('table tr:even').addClass('even');
  $('table tr:odd').addClass('odd');
  $('table').each(function () {  // For each 'table'...
    $(this).find('tr:first').addClass('firstrow');  // Add class 'firstrow' to the first 'tr'.
  });
});

现场演示here。