3

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

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

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

我想要做的是，一旦你悬停任何子表，它的标题和你当前指向的行都应该改变背景颜色（后者很容易用 CSS 实现）。多亏了在网上找到的 JavaScript，我设法实现了这一点 - 请参阅可能更好地解释这一点的示例代码 ，另请参阅下面的代码 - 但是这需要每个子标题的唯一 ID。（请注意，每个子表都使用单独的 tbody - 如果将onMouseover事件改为应用于每一行，则子标题的颜色会在从一行悬停到另一行时闪烁/继续 - 这不会发生在 CSS 中，但只有使用 JavaScript - 当然，还要创建更多代码。）

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

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

对于示例代码，请再次查看我的小提琴

非常感谢您的任何意见！

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>
4

2 回答 2

2

您可以使用纯 CSS（具有通常的浏览器兼容性条件）来实现这一点，因此假设您使用的是相对现代的 Chrome、Safari、Firefox、Opera 或者可能是 IE 9（或更高版本）：

tbody:hover tr.sub-header {
    background-color: #0f0;
}

tbody tr.sub-row:hover {
    background-color: #f90;
}​

JS Fiddle 演示（显然，根据您的喜好调整颜色；这些只是为了演示的目的）。

当然，值得一提的是，某些浏览器可能不会显示tr元素的background-color（因为它显示在元素的后面），在这种情况下，您可能需要修改选择器以定位相关元素：background-colortdtd

tbody:hover tr.sub-header td {
    background-color: #0f0;
}

tbody tr.sub-row:hover td {
    background-color: #f90;
}​
于 2012-07-27T17:33:11.910 回答
2

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

  • 首先，除了你的备用行样式之外，所有的类都可以出来（除非你不关心 IE 8 及以下，在这种情况下你可以取出 IE 条件 CSS 和类名。请参阅浏览器 CSS 选择器兼容性图表。）
  • 其次，将其中td的每个子标题更改为th.
  • 第三，使用:hover父级上的伪选择器来设置指定tbody样式。th

看到这个在 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 属性“背景”不仅需要颜色，还会重置其他属性。当您想要设置样式时，请使用“背景颜色”。
  • 为了使特定规则使 IE 赋予它比奇数行的特殊着色更高的优先级，需要额外td的。tr:hover
  • “奇数”行实际上是数据的偶数行，因为子标题消耗了第一个奇数行。
  • 使用 CSSborder-collapse:collapse而不是cellspacing直接放在桌子上。

我不得不将 IE 的条件 CSS 放在小提琴的 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>

最后，我意识到颜色可能只是示例，所以我可以建议明亮的原色不适用于人类的认知反应吗？您可以改为使用一种突出显示效果。请参阅我为您整理的一个工作示例，使用（在我看来）更令人愉悦的颜色。当您将鼠标悬停在该部分上时，看看它是如何“发光”的？美丽的！

更漂亮的表格示例

注意：在 IE8 及之前的版本中，右侧会有一个额外的边框。如果您有一个多列表并且您喜欢内部边框并且想要支持 IE8 及更低版本，您需要在每行的最后一个单元格中添加一个类，以便移除其右边框。

于 2012-07-27T18:10:19.693 回答