如何使用jQuery突出显示某些表行？

Question

我的CodePen： http://codepen.io/leongaban/pen/nJzcv

所以我在CSS-Tricks上找到了表格行突出显示的this great example。 （Demo）

但是我不想突出显示我的top row，我试图只针对某个类名称的td，但仍然没有关闭：（

你会怎么做？

//Row Highlighting
$("table .active").delegate('td','mouseover mouseout', function(e) {
        if (e.type == 'mouseover') {
            console.log('hovering over row');
            $(this).parent().addClass("gray-rollover");
        }
        else {
            $(this).parent().removeClass("gray-rollover");
        }
    });

// Works but highlights all Rows
/*$("table").delegate('td','mouseover mouseout', function(e) {
        if (e.type == 'mouseover') {
            console.log('hovering over row');
            $(this).parent().addClass("gray-rollover");
        }
        else {
            $(this).parent().removeClass("gray-rollover");
        }
    });*/

Answer 1

您可以在第一行周围添加table head，在其余行周围添加一个表格主体：

<table cellpadding="12" cellspacing="1" border="1">
  <thead><tr>
    <th>Icon</th>
    <th class="data-td data-name">Name</th>
    <th class="data-td data-career">Career</th>
    <th class="data-td data-company">Company</th>
  </tr></thead>
  <tbody><tr>
  <!-- more stuff -->
  </tr></tbody>
</table>

然后你可以用你的JavaScript来定位表体：

$("table > tbody .active").on('mouseover mouseout','td', function(e) {

虽然可以用JS而不改变HTML来实现这一点，但在这种情况下我更喜欢HTML更改，因为它在语义上是正确的 - 你的第一行不是内容，所以应该无论如何都要单独标记为标题。

Answer 2

一种方法是使用not()选择器：

$(this).parent().not('tr:first-child').addClass("gray-rollover");

这会将类添加到除mouseover上的第一行之外的所有行。

CodePen here.

Answer 3

为什么不简单地使用CSS：

tr:nth-child(even) td {
    background: #333;
    color: #fff;
}

所以你想要鼠标悬停的样式，除了第一行。然后：

tr:hover td {
    background: #333;
    color: #fff;
}

tr:first-child:hover td{
    background: none;
    color: #333
}

或者我在这里遗漏了什么？