突出显示部分HTML表格行

Question

我有一个HTML格式的表格，格式如下：

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

此时，我有一个滚动，并点击了整个行，所以当我用鼠标移动到它上面时，背景颜色会改变，当我点击任何列时，事件就会发生。

我的问题如下，我现在看到改变这个布局是有帮助的，当鼠标移到第三到第五列时，点击那里会执行相同的事件，但当我点击第一列或第二列中的名称时，它会转到该名称的URL。

本质上，我试图找出是否可以将表行高亮显示限制在第3-5列，然后单击这些列中的任何一列来触发事件。

解决方案是将第3-5行放在跨度内吗？这似乎行不通。

Answer 1

使用:gt()选择器怎么样？From the docs：

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

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

JS :

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

CSS

.highlight {
    background-color: aqua;
}

演示

http://jsfiddle.net/hungerpain/rJZbn/

Answer 2

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

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

Answer 3

有一个only 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参见最后一个示例