表格行的jQuery突出显示答案

【问题标题】：jQuery highlight for table row表格行的jQuery突出显示
【发布时间】：2011-12-31 05:29:17
【问题描述】：

我有 4 个名为 col1、col2、col3、col4 的列表。列具有不同的颜色。 col1 有工具提示链接。当光标指向链接时，将显示工具提示以及要更改的行的背景图像。整个表格只有一张背景图片。

我尝试使用以下代码，但在 Chrome 和 Safari 中，它为所有 4 个 cols 显示相同的颜色（第一个 col 的颜色）。

$(function() {
$('td:first-child a').hover(function() {
    $(this).closest('table.benefitstable tbody tr').toggleClass("highlight");
});
});

.benefitstable tbody tr.highlight {
background:url(../images/tablerowhover.jpg) 0 0 no-repeat;
}

它几乎等同于没有使用以下标签的jQuery：

.benefitstable tbody tr:hover {
background:url(../images/tablerowhover.jpg) 0 0 no-repeat;
}

有什么帮助吗？

【问题讨论】：

Twitter bootstrap zebra table 实现了这个，可能想看看twitter.github.com/bootstrap/#tables
对 twitter bootstrap 不感兴趣，因为它为许多元素指定了 18px 的边距/填充。

标签： jquery jquery-selectors

【解决方案1】：

你不尝试什么： $(this).parent('table.benefitstable tbody tr').toggleClass("highlight"); 因为任何 TD 元素都将是该行的子元素？我不确定那里的最接近（）的使用......

【讨论】：

我的猜测是因为他/她实际上选择的是a，而不是td。
只有当鼠标悬停在第一列的链接上而不是其他列时，悬停才需要工作。
我实际上也做过这样的事情并且它有效：$(this).parent().parent()。这可能不是最佳实践，但 Jquery parentsUntil('tr') 函数将上升到您想要的 TR 并选择 TD，而不是实际的父级。它需要的是 parentsUntilandIncluding() 或类似的东西，IMO。抱歉，我错过了 ('a') 部分...
我正在进行以下更改，它仅突出显示悬停单元格而不是整行。 $(function() { $('td').hover(function() { $(this).closest('table.benefitstable tbody tr td.col1').toggleClass("highlight1"); $(this).最近('table.benefitstable tbody tr td.col2').toggleClass("highlight2"); $(this).closest('table.benefitstable tbody tr td.col3').toggleClass("highlight2"); $(this ).closest('table.benefitstable tbody tr td.col4').toggleClass("highlight2"); }); });