0

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

所以我在 CSS-Tricks 上找到了这个很好的表格行高亮示例。（演示）

但是我不想突出显示 my 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");
        }
    });*/
4

3 回答 3

3

您可以在第一行周围添加一个表头，在其余部分周围添加一个表体：

<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 更改，因为它在语义上是正确的——您的第一行不是内容，因此无论如何它都应该单独标记为标题。

于 2013-06-19T21:16:42.470 回答
1

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

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

这会将类添加到除鼠标悬停的第一行之外的所有行。

代码笔在这里。

于 2013-06-19T21:14:00.027 回答
0

为什么不简单地使用 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
}

或者我在这里错过了什么？

于 2013-06-19T21:14:38.147 回答