Question

我在HTML中有如下表格：

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

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

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

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

解决方案是将行3-5放入跨度吗？这似乎不起作用。

Answer 1

您可以使用jQuery的slice将类添加到某个列的子集中：

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

Answer 2

如何使用:gt()选择器abt。 From the docs：

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

请注意，gt基于零，因此要突出显示第3列，您需要将index用作1。

JS：

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

<强> CSS

.highlight {
    background-color: aqua;
}

<强>演示

Answer 3

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

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