javascript - 将鼠标悬停在同一表格中的另一行上时更改表格行的背景颜色

Question

这是我在这里的第一篇文章，我绝不是一个熟练的 HTML/CSS/JavaScript 程序员，所以如果我表达得不够清楚，请多多包涵 - 如果太罗嗦，请见谅!

我正在为表格内容使用经典的 HTML 表格，并且希望能够更改与我当前悬停的行不同的行的背景颜色。

这样做的原因是我有很多表格被分成“子表格”，每个表格都有自己的标题和下面的一行或多行。这些子表 - 都具有相同的样式 - 但是没有编码为表，而是我只是使用不同的类来设置它们的样式(这主要是因为它们又多又小，每个 1-6 行，包括标题)。

我想要做的是，一旦您悬停任何子表，它的标题和您当前指向的行都应该更改背景颜色(后者很容易通过 CSS 实现)。感谢在线找到的 JavaScript，我已经设法实现了这一点 - 请参阅 sample code这可能更好地解释了这一点，另请参见下面的代码 - 但是每个子标题都需要一个唯一的 ID。 (请注意，每个子表都使用一个单独的 tbody - 如果将 onMouseover 事件应用于每一行，则当从一行悬停到另一行时，子标题的颜色会闪烁/亮起和熄灭- 这永远不会发生在 CSS 上，而只会发生在 JavaScript 上 - 当然还要创建更多的代码。)

我不想为每个子标题分配唯一的 ID，而是想要一个使用类的解决方案，因为每个子表都使用相同的类(我当然会为 分配一个类tbody 然后)。我想这个棘手的部分可能是确保只有当前子表的标题受到影响，而不是同时受到影响。 如果创建一个解决方案更容易，其中每个子表实际上都被编码为一个单独的表(从语义的 Angular 来看，这也可能更好？)那么请这样做。如果 JavaScript 自己应用 onMouseover 等事件当然更好，这样我就不必将它放入每个子表的内联代码中 - 我已经看到了可以为按钮等完成，所以我想这是可能的。

我从未使用过 jQuery，因此我更喜欢纯 JavaScript 解决方案。

再次查看示例代码，请参阅 my fiddle

非常感谢任何输入!

JavaScript:

function changeTo(myId) { document.getElementById(myId).className='sub-header-highlight'; }
function changeBack(myId) { document.getElementById(myId).className='sub-header'; }

CSS:

thead { color: #FFF; background: #000; }
.sub-header { color: #FFF; font-weight: bold; background: #F00; }
.sub-header-highlight { color:# FFF; font-weight: bold; background: #0F0; }
tr.sub-header:hover { background: #0F0; } /* if JS turned off */

.sub-row1 { color: #000; background: #FFF; }
.sub-row2 { color: #000; background: #EEE; }
tr.sub-row1:hover, .sub-row2:hover { background: #FF0; }

部分 HTML:

<tbody onMouseover="changeTo('sub1');" onMouseout="changeBack('sub1');">
   <tr class="sub-header" id="sub1">
      <td>Sub-Header 1</td>
   </tr>
   <tr class="sub-row1">
      <td>Contents of row 1</td>
   </tr>
   <tr class="sub-row2">
      <td>Contents of row 2</td>
   </tr>
   <tr class="sub-row1">
      <td>Contents of row 3</td>
   </tr>
</tbody>

Answer 1

您可以极大地简化 HTML 标记和 CSS，并且无需使用 Javascript。

• 首先，除了您的交替行样式外，所有类都可以出来(除非您不关心 IE 8 及以下版本，在这种情况下，您可以取出 IE 条件 CSS 和类名。参见 browser CSS selector compatibility chart。 )
• 其次，将子标题中的每个 td 更改为 th。
• 第三，在父 tbody 上使用 :hover 伪选择器按照指定的方式设置 th 的样式。

查看此 working in a jsfiddle ，经测试可在 IE 7 和 Firefox 14 中完美运行。

这是 CSS:

table { border-collapse:collapse; }
thead { color: #FFF; background-color: #000; }

tbody th { color: #FFF; font-weight: bold; background-color: #F00; text-align:left; }
tbody:hover th { background: #0F0; }

tbody tr:nth-child(odd) { background-color:#EEE; }
tbody tr:hover td { background: #FF0; }

样式注释:

• CSS 属性“背景”不仅仅需要颜色，还会重置其他属性。如果您只想设置样式，请使用“背景颜色”。
• tr:hover 上的额外 td 是必需的，以便特定规则使 IE 赋予它比奇数行的特殊着色更高的优先级。<
• “奇数”行实际上是数据的偶数行，因为子标题使用第一个奇数行。
• 直接在表格上使用 CSS border-collapse:collapse 而不是 cellspacing。

我不得不将 IE 的条件 CSS 放在 fiddle 的 HTML 部分，因为它必须在 style 标签之外。

<!--[if lte IE 8]>
<style type="text/css">
  tbody tr.odd { color: #000; background: #EEE; }
</style>
<![endif]-->

这是 HTML。看看现在有多干净？

<table>
   <thead>
      <tr>
         <th>MAIN HEADER</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <th>Sub-Header 1</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
      <tr>
         <td>Contents of row 3</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 2</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
   </tbody>
   <tbody>
      <tr>
         <th>Sub-Header 3</th>
      </tr>
      <tr>
         <td>Contents of row 1</td>
      </tr>
      <tr class="odd">
         <td>Contents of row 2</td>
      </tr>
   </tbody>
</table>

最后，我意识到这些颜色可能只是示例，所以我可以建议明亮的原色不会很好地适应人类的认知 react 吗？您可以改为使用某种突出显示效果。参见 a working example我为你整理的，使用的颜色(在我看来)更令人愉悦。当您将鼠标悬停在它上面时，看到该部分是如何“发光”的吗？漂亮!

注意:在IE8及之前的版本中，右侧会多出一个边框。如果你有一个多列表并且你喜欢内部边框的东西并且想要支持 IE8 和更低版本，你需要将一个类添加到每行的最后一个单元格以便它可以删除它的右边框。