悬停在一行上时如何突出显示多行 [英] How to highlight multiple rows when hovering over one row

问题描述

在我的表格中，一列中有多个跨多行的值。当我将鼠标悬停在此值上时，只有一行显示为高（包含实际值的行）。我的问题是，将鼠标悬停在跨越它们的值上时，是否还有其他功能？

In my table I have a some values in a column that span over multiple rows. When I hover over this value only one row is hilighted (the row containing the actual value). My question is, is there anyway to hilight the other rows when hovering on the value that spans over them ?

这是一个代码示例：

    table {
        border-collapse: collapse;
        width: 100%;
    }
    
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    
    tr:hover{background-color:#f5f5f5}

<h2>Hoverable Table</h2>
    <p>Move the mouse over the table rows to see the effect.</p>
    
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
      </tr>
      <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td rowspan="2">$100</td>
      </tr>
      <tr>
        <td>Lois</td>
        <td>Griffin</td>
      </tr>
      <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td rowspan="2">$300</td>
      </tr>
      <tr>
        <td>Cleveland</td>
        <td>Brown</td>
      </tr>
    </table>
    

推荐答案

如果您的问题大约是在$ 100徘徊时，Peter和Lois的行都应该突出显示，那么根据我的理解，您不能仅靠CSS做到这一点。您应该选择js脚本。

If your question is about when hovering $100, both Peter and Lois rows should get highlighted then you cannot do it with css alone as per my understanding. You are suppose to go for js scripts.

检查以下代码片段以供参考。将 rowspan 悬停在td上。希望这会有所帮助。

Check below snippet for reference. Hover on td with rowspan. Hope this helps.

$('.hasRowSpan').hover(function(){
	$(this).closest('tr').toggleClass('bg-red');
  $(this).closest('tr').next('tr').toggleClass('bg-red');
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

 tr:hover{background-color:red}

.bg-red{
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td class="hasRowSpan" rowspan="2">$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td class="hasRowSpan" rowspan="2">$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
</table>

更新：当 rowspan 具有多于2行时，可以使用 nextAll（）。

Update: You can use nextAll() when rowspan has more than 2 rows.

根据您的评论找到以下更新的代码段。

Find below updated snippet as per your comment.

$('tr').hover(function() {
  if ($(this).find('td').hasClass('hasRowSpan')) {
    $(this).next('tr').toggleClass('bg-red');
  }
  if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
    $(this).prev('tr').toggleClass('bg-red');
  }
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: red
}

.bg-red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td class="hasRowSpan" rowspan="2">$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Rijo</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td class="hasRowSpan" rowspan="2">$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
</table>

更新1 ：根据您在此处的评论，我刚刚更新了脚本。 注意：如果您的行距超过2，请确保此行不通。

Update 1: I just updated the script as per your comment here. Note: Am sure this won't be working if you have rowspan more than 2.

$('.hasRowSpan').hover(function() {
  $(this).closest('tr').toggleClass('bg-red');
  $(this).closest('tr').next('tr').toggleClass('bg-red');
});

$('tr').hover(function() {
  if ($(this).prev('tr').find('td').hasClass('hasRowSpan')) {
    $(this).prev('tr').find('td.hasRowSpan').toggleClass('bg-red');
  }
});

table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: red
}

.bg-red {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Points</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
    <td class="hasRowSpan" rowspan="2">$100</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>David</td>
    <td>Rijo</td>
    <td>$500</td>
  </tr>
  <tr>
    <td>Joe</td>
    <td>Swanson</td>
    <td class="hasRowSpan" rowspan="2">$300</td>
  </tr>
  <tr>
    <td>Cleveland</td>
    <td>Brown</td>
  </tr>
</table>

更新2 ：检查上面的代码段，我已根据您的期望输出更改了代码。

Update 2: Check above snippet, I have changed my code as per your desired output.

这篇关于悬停在一行上时如何突出显示多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！