JavaScript表突出显示

Question

我的问题是，我要突出显示当前悬停的行下方的表行。

但是，我面临的问题是在两行之后，它应该然后突出显示接下来的两行。基本上，表的每两行突出显示为一。

因此，如果第2行和第3行被突出显示，则当我将鼠标悬停在第4行上时，只有4和5被突出显示，而6和7依此类推。

当前，在悬停时，它仅突出显示鼠标所在的行。使用CSS可能会发生这种情况吗？还是我只是忽略了一些明显的东西。

table tr:nth-child(4n+4) {
  background-color: #EBEBEB;
}
#table tr:nth-child(4n+5) {
  background-color: #EBEBEB;
}
#table tr:hover {
  background: #3498DB;
}

在这里查看我的作品：http://jsfiddle.net/g5o7v6qe/21/

对不起，如果我的问题有点令人困惑或措辞困难，我确实对HTML和CSS有所了解，但这出于某种原因使我感到困惑。谢谢。

Answer 1

可悲的是，单独的CSS无法实现您要寻找的解决方案，因为CSS没有提供用于选择先前子项的选择器（将鼠标悬停在描述上时，还需要突出显示上面的行）。相反，您可以稍微修改HTML以使其成为可能：

介绍tbody元素！

tbody元素可以与thead和tfoot结合使用，例如在锁定表的页眉和页脚的同时启用滚动。另外，在打印时，如果表格跨越多页，则页眉和页脚可能会在下一页重复出现。检查this question了解更多详细信息。

很多人不知道的是，您可以在一个表中包含多个tbody元素。这意味着您可以将表中的每一行行包装在tbody元素中，然后为每行适当地设置样式：

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}

#table tbody:nth-child(2n+3) {
  background-color: #EBEBEB;
}

/* Group highlights */
#table tbody:hover {
  background: #3498D8;
}

<table align="center" id="table">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Model</th>
      <th>Year</th>
      <th>Source</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>vendor1</td>
      <td>model1</td>
      <td>year1</td>
      <td>source1</td>
    </tr>
    
    <tr>
      <td colspan="4">description1</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor2</td>
      <td>model2</td>
      <td>year2</td>
      <td>source2</td>
    </tr>
    
    <tr>
      <td colspan="4">description2</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor3</td>
      <td>model3</td>
      <td>year3</td>
      <td>source3</td>
    </tr>
    
    <tr>
      <td colspan="4">description3</td>
    </tr>
  </tbody>

  <tbody>
    <tr>
      <td>vendor4</td>
      <td>model4</td>
      <td>year4</td>
      <td>source4</td>
    </tr>
    
    <tr>
      <td colspan="4">description4</td>
    </tr>
  </tbody>
</table>

P.s .：在使用时，您可能还希望将表头嵌套在thead元素中，以保持一致性。

Answer 2

因此，根据我的理解，您希望这样做：jsfiddle

#table tr:nth-child(2n+2):hover {
  background: #3498DB;
}

#table tr:nth-child(2n+2):hover + tr {
  background: #3498DB;
}

从第二行的nth-child(2n+2)开始，突出显示悬停时每2行。

使用+ tr，您可以使所有tr（悬停的tr的相邻兄弟姐妹）都突出显示。

希望对您有意义。

编辑：请注意，这不适用于将每个行组的第二行悬停以突出显示该组。因此，这不是问题的完整解决方案。

Answer 3

这是您想要实现的目标吗？

我还修改了不正确的html标记和CSS。

#table {
  border-radius: 10px;
  border-collapse: collapse;
  width: auto;
}

#table td,
#table th {
  border: 1px solid #DDDDDD;
  padding: 8px;
}

#table tr:nth-child(4n+3) {
  background-color: #EBEBEB;
}

#table tr:nth-child(4n+4) {
  background-color: #EBEBEB;
}

#table tr:hover td,
#table tr:nth-child(2n+1):hover td,
#table tr:nth-child(2n+1):hover + tr td {
  background: #3498DB;
}

#table th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #333333;
  color: white;
}

<table align="center" id="table">
  <thead>
    <tr>
      <th>Vendor</th>
      <th>Model</th>
      <th>Year</th>
      <th>Source</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>vendor1</td>
      <td>model1</td>
      <td>year1</td>
      <td>source1</td>
    </tr>
    <tr>
      <td colspan="4">description1</td>
    </tr>
    <tr>
      <td>vendor2</td>
      <td>model2</td>
      <td>year2</td>
      <td>source2</td>
    </tr>
    <tr>
      <td colspan="4">description2</td>
    </tr>
    <tr>
      <td>vendor3</td>
      <td>model3</td>
      <td>year3</td>
      <td>source3</td>
    </tr>
    <tr>
      <td colspan="4">description3</td>
    </tr>
    <tr>
      <td>vendor4</td>
      <td>model4</td>
      <td>year4</td>
      <td>source4</td>
    </tr>
    <tr>
      <td colspan="4">description4</td>
    </tr>
  </tbody>
</table>

Answer 4

以下是当我们将鼠标悬停在特定行上时突出显示表中下两行的代码。

td, th {
  padding: 10px;
}
tr.head-row {
  background: grey;
}
tr:not(.head-row) {
  background: #fff5f5;
}


/* highlight the current row on hover*/
tr:hover:not(.head-row) {
    background: #f8b5b5;
}

/* highlight next row on hovering a row */
tr:hover:not(.head-row) + tr {
    background: #91cefe;
}

/* highlight next to next row on hovering a row */
tr:hover:not(.head-row) + tr + tr {
    background: #67ace1;
}

<table style="width:100%" id="table">
  <tr class="head-row">
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eveas</td>
    <td>Jackson we</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Everrr</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve ff</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eveas</td>
    <td>Jackson we</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Everrr</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr>
    <td>Eve ff</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Answer 5

JavaScript表突出显示

Css不允许您在dom中向上选择一个同级。

这是我在JS中解决的方法：

$(function() {
  //Selected all rows with a data-group attribute
  let rows = $("tr[data-group]");
  //on hover over 
  rows.hover(function over() {
    let group = $(this).data("group");
    $(this).addClass("highlight");
    $(this).siblings("tr[data-group=" + group + "]").addClass("highlight");
    //on hover out
  }, function out() {
    let group = $(this).data("group");
    $(this).removeClass("highlight");
    $(this).siblings("tr[data-group=" + group + "]").removeClass("highlight");
  });
});

table {
  border: 1px solid black;
}

td {
  padding: 0.5em 1em;
  border: 2px solid blue;
}

.highlight {
  background-color: cornflowerblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr data-group="1">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="1">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="2">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="2">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="3">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="3">
    <td colspan="2">Long element</td>
  </tr>
  <tr data-group="4">
    <td>element1</td>
    <td>element2</td>
  </tr>
  <tr data-group="4">
    <td colspan="2">Long element</td>
  </tr>
</table>

CSS如何在悬停时突出显示表中的两行？

5 个答案:

JavaScript表突出显示