突出显示 HTML 表格中的行（悬停在行和前面的行上）答案

【问题标题】：Highlight rows in HTML table (hovered over row and preceding rows)突出显示 HTML 表格中的行（悬停在行和前面的行上）
【发布时间】：2014-03-25 12:41:27
【问题描述】：

假设一个示例表：

<table>
   <tr>
     <th>Head 1</th>
     <th>Head 2</th>
    </tr>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr>
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <tr>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <tr>
      <td>Data 7</td>
      <td>Data 8</td>
    </tr>
</table>

我正在寻找突出显示行

<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

表格的以下部分应突出显示：

<tr>
  <td>Data 1</td>
  <td>Data 2</td>
</tr>
<tr>
  <td>Data 3</td>
  <td>Data 4</td>
</tr>
<tr>
  <td>Data 5</td>
  <td>Data 6</td>
</tr>

任何想法如何实现这种效果？

【问题讨论】：

你真的应该使用 thead 和 tbody！

标签： javascript jquery html css

【解决方案1】：

基本上，你可以看到相反的方式：任何tr 在悬停tr 之后应该没有背景：测试一下：

table:hover tr {
  background:gray;
}
table:hover tr:hover ~tr {
  background:none;
}

DEMO

=============== 从 cmets 中的请求编辑 ================

React only on last element in row.

注意：此选项不允许点击单元格，而是每行的最后一个。

table {
  pointer-events:none;
}
table tr :last-child {
  pointer-events:auto;
  cursor: pointer;
}

【讨论】：

干得好！将 td 添加到两个规则以停止突出显示表头
谢谢，有人不喜欢它，我能解释一下吗，除非它是关于过时的浏览器:)
非常好的解决方案！ OP 应该做出有效的标记<thead>..</thead> <tbody>..</tbody> 然后它是完美的。
@GCyrillus 很好地支持大多数浏览器（除非你仍然支持IE6）：reference.sitepoint.com/css/generalsiblingselector
@ElGavilan 较旧的 IE 会遇到 :hover 的问题，而不是选择器。

【解决方案2】：

试试这个：（小提琴：http://jsfiddle.net/5SLN3/）

$('tr').hover(
    function(){
        $(this).addClass('hover').prevAll().addClass('hover');
    },
    function(){
        $(this).removeClass('hover').prevAll().removeClass('hover');
    }
)

风格：

<style>
tr.hover td{background-color:#888}
</style>

【讨论】：

【解决方案3】：

由于没有先前的选择器，您需要做相反的事情。在 tbody 中添加一个 hove 并在选择的行之后更改行的颜色。

HTML：

<table class="hovTable">
    <thead>
        <tr>
            <th>Head 1</th>
            <th>Head 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
            <td>Data 4</td>
        </tr>
        <tr>
            <td>Data 5</td>
            <td>Data 6</td>
        </tr>
        <tr>
            <td>Data 7</td>
            <td>Data 8</td>
        </tr>
    </tbody>
</table>

CSS：

.hovTable, tr, td, th {
    border-collapse: collapse;
    border: 1px solid black;    
}

.hovTable tbody td {
    background-color: #FFF;    
}

.hovTable tbody:hover td {
    background-color: #CCC;    
}

.hovTable tbody:hover tr:hover ~ tr td {
    background-color: #FFF;    
}

示例：

JSFiddle

参考资料：

General Sibling Selector

【讨论】：

很遗憾，我无法选择两个答案，但我将您的答案标记为有帮助。谢谢！ :)

【解决方案4】：

var nameOfRows = "row"
//useful when there are other tables in your document.
//use like this
//<table>
//...<tr name="row">...</tr><tr name="row">...</tr>...
var backgroundOriginal = "#ffffff"; //background when the row isn't selected
var backgroundHover = "#ff0000"; //background when the row is selected;

function setHigh (id)
{
     var rows = document.getElementsByName(nameOfRows);
     for (var i = 0; i < rows.length; i++)
     {
           rows[i].style.background = backgroundOriginal;
     }
     for (i = 0; i <= id; i++) {
          rows[i].style.background = backgroundHover;
     }
}

for (var i = 0; i < document.getElementsByName(nameOfRows).length; i++)
{
     document.getElementsByName(nameOfRows)[i].onmouseover = setHigh(i);
}

试试这个。我还没有测试过，但我认为它应该可以工作！

【讨论】：

你有错误...onmouseover = setHigh(i);