突出显示部分 HTML 表格行

Posted 2023-03-06

【中文标题】突出显示部分 HTML 表格行

【英文标题】：Highlight partial HTML table row

【发布时间】：2013-07-12 08:45:43

【问题描述】：

我有一个 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 行放在一个跨度内吗？这似乎不起作用。

【参考方案1】：

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

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

【参考方案2】：

如何使用: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/

【讨论】：

我知道.. 只是为您的答案提供了一个替代方案:)

有趣的是，gt 在我的 PC 上对我来说更快 - 使用 Chrome 28 @Blade0rz :)

@hungerpain 绝对有趣！我的 Chrome 28 返回 :gt() 慢了 59%

【参考方案3】：

有一个只有 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 看最后一个例子