在表格中悬停单元格时突出显示特定单元格

Posted 2023-03-06

【中文标题】在表格中悬停单元格时突出显示特定单元格

【英文标题】：Highlighting specific cells on hover of a cell in a table

【发布时间】：2015-11-03 23:31:51

【问题描述】：

我有下表（实际表更大，在 WordPress 中实现）：

<table id="tablepress-71" class="tablepress tablepress-id-71">
       <tr class="row-1">
         <td class="column-1"><span><a href="#">Item 1</a></span></td>
         <td class="column-2"><span><a href="#">Item 2</a></span></td>
      </tr>
      <tr class="row-2">
         <td class="column-1"><span><a href="#">Item 3</a></span></td>
         <td class="column-2"><span><a href="#">Item 4</a></span></td>
      </tr>
  </table>

我需要在将鼠标悬停在特定单元格上时突出显示（背景色）一组单元格。 例如，将鼠标悬停在单元格 .row-1 .column-2 上时，我希望突出显示以下单元格： .row-1 .column-2 和 .row-2 .column-2

有 8 个单元格接受悬停，每个单元格在悬停时突出显示表格上的一组特定单元格（没有规则，只是一个指定的列表）。

可以使用 CSS 和/或 JS。

【问题讨论】：

你在no rules, just a specified list 失去了我。那么您有想要突出显示的列表吗？或者您想突出显示同一列上的所有单元格？

Bogdan，没有规则 = 指定的单元格列表，而不是像“行中的所有单元格”/“列中的所有单元格”/“所有白色单元格”之类的东西......我必须列出单元格为每个悬停的单元格突出显示

【参考方案1】：

你在找这个吗？如果不是，你能澄清一下。

给所有column2单元格添加一个active类：

$('td.row-1 .column-2').hover(function()
    $('.column-2').toggleClass('active');
);

或：

给特定的column2单元格添加一个active类：

$('.column-2').hover(function()
    $('this').toggleClass('active');
);

【讨论】：

谢谢，bklynM！这对我有用： $('.row-1 .column-2').hover(function() $('.row-2 .column-2').addClass('active'); $('. row-2 .column-1').addClass('active'); );但是，如何在悬停完成后删除红色背景？需要恢复到原来的背景颜色...

我在上面的答案中将 addClass 更改为 toggleClass。如果有效，请接受答案。

不再工作 - addClass 或 toggleClass。 $('.row-1 .column-2').hover(function() $('.row-2 .column-2').toggleClass('active'); );也用“td”。在元素类名称中 - 不起作用。我错过了什么？见这里：jsfiddle.net/morsagmon/g4w2ttpy/3

我整理了它，它现在在我的小提琴中工作。我还去掉了悬停样式的边框和粗体，因为它使单元格跳跃，你可能不需要 css 名称的权重，可以使用 .active 和 .active span a：jsfiddle.net/g4w2ttpy/28

是的，谢谢！还有一个问题：如何将这个 JS 限制为特定的 tablepress-71 表？

【参考方案2】：

我假设“没有规则，只是一个指定的列表”，您的意思是每个单元格都有一个其他特定单元格的列表，当第一个单元格悬停时，您希望突出显示该单元格。但是从代码的角度来看，这些单元格会有些随意。 （即不受任何规则或逻辑的约束）。

如果这个假设是正确的，并且如果您愿意使用 jquery，您可以对 javascript 执行以下操作（假设您的 CSS 中有一个名为“highlight”的类）：

$('.row-1 .column-2').mouseenter(function()
  $('.row-1 .column-2').addClass('highlight');
  $('.row-2 .column-2').addClass('highlight');
).mouseleave(function() 
  $('.row-1 .column-2').removeClass('highlight');
  $('.row-2 .column-2').removeClass('highlight');
);

这会有点冗长，因为您必须准确地写出要为悬停的每个单元格突出显示哪些单元格。但如果没有规范行为的规则，那是我想到的最佳方法。

祝你好运！

这是一个工作示例：code pen

【讨论】：

谢谢！你完全理解我需要什么:) 代码对我不起作用（并且代码笔已关闭）。完全没有悬停效果。使用 jQuery。

嗯不知道为什么代码笔不起作用（这是我第一次在这里发帖，所以也许我做错了什么，但链接对我有用），但看起来 bklynM 的答案有效对你来说，那太好了！