Question

我有一个asp.net gridview，它呈现以下表结构：

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td>cell1</td><td>cell2</td><td>cell3</td></tr>
</table>

我使用以下jQuery语句突出显示每个非标题行的整行。

$("table tr:has(td)").css({ background: "ffffff" }).hover(
  function () { $(this).css({ background: "#FC6" }); },
  function () { $(this).css({ background: "#ffffff" }); }
);

如何更改此代码以突出显示每个非标题行，而不是该行的第3个（最后一个）单元格？例如，同时突出显示行的前两个单元格，但不突出显示第三个单元格。

如果有人对选择器逻辑有一个不错的Web引用，那也值得赞赏。

Answer 1

您可以使用:not() selector结合:last-child() selector来完成此操作，如下所示：

$("tr:has(td)").hover(function() {
    $(this).find("td:not(:last-child)").css("background-color", "#FC6");
}, function() {
    $(this).find("td").css("background-color", "#FFF");
});

这样可以带来额外的好处，即不依赖于三列。这是一个fiddle来证明这一点。

Answer 2

请参阅此链接fiddle，如果我不是仪式，请告诉我..

<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr><td class="c1">cell1</td><td class="c2">cell2</td><td>cell3</td></tr>
<tr><td class="c1">cell1</td><td class="c2">cell2</td><td>cell3</td></tr>
</table>

$(".c1").closest('td').css('background-color', 'red');
$(".c2").closest('td').css('background-color', 'red');

jquery突出显示了asp.net gridview行的一部分

2 个答案: