Question

假设一个示例表：

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

我正在寻找突出显示行＆lt; = n的最佳技术，其中n是悬停在行上（不包括标题行）。例如，如果鼠标结束

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

有任何想法可以实现这种效果吗？

Answer 1

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

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

DEMO

===============从评论中请求编辑================

React only on last element in row

请注意：此选项不允许单击单元格，但只允许每行中的一行。

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

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

Answer 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

Answer 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);
}

试一试。我还没有测试过，但我认为它应该可以使用！

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

4 个答案: