jquery - 突出显示部分 HTML 表格行

Question

我在 HTML 中有如下表格：

 <table>
  <tr>
   <td>col1</td>
   <td>col2</td>
   <td>col3</td>
   <td>col4</td>
   <td>col5</td>
  </tr>
 </table>

目前，我有一个翻转并单击整行，所以当我用鼠标移动它时，背景颜色会发生变化，并且当我单击任何列时都会发生事件。

我的问题如下，我现在看到更改此布局会有所帮助，并且在鼠标悬停时仅突出显示第 3-5 列，并且单击那里会执行相同的事件，但是当我单击第 1 列或第 2 列中的名称时将转到该名称的 URL。

本质上，我试图找出是否可以将表格行突出显示限制为仅列 3-5，然后单击其中任何列触发事件。

解决方案是将第 3-5 行放在一个跨度内吗？这似乎不起作用。

score 0 · Accepted Answer

您可以使用 jQuery 的切片将类添加到特定的列子集：

$("tr").hover(function() {
  $(this).find("td").slice(2,5).addClass("hovering");
}, function() {
  $(this).find("td").removeClass("hovering");
});

score 0 · Accepted Answer

如何使用:gt()选择器。从文档：

选择匹配集中索引大于索引处的所有元素。

请注意，它gt是从零开始的，因此要突出显示第 3 -5 列，您需要使用indexas 1。

JS：

$("tr").on("mouseover mouseout", function () {
    $(this).find("td:gt(1)").toggleClass("highlight");
});

CSS

.highlight {
    background-color: aqua;
}

演示

score 0 · Accepted Answer

有一个唯一的 css解决方案：

table tr td:nth-child(n+2):nth-child(-n+5) {
  background-color: tomato;
}

参考：https ://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child 看最后一个例子

3 回答 3