Question

在我的表中，我在一列中有一些跨越多行的值。当我将鼠标悬停在此值上时，只有一行是高亮的（包含实际值的行）。我的问题是，当徘徊在跨越它们的价值时，是否还有其他行的hilight？

这是一个代码示例：

    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>

Answer 1

如果您的问题是关于何时悬停100美元，Peter和Lois行应该突出显示，那么根据我的理解，您无法单独使用css。您可以选择使用js脚本。

请查看以下代码段以供参考。将鼠标悬停在rowspan的td上。希望这会有所帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

更新：当nextAll()超过2行时，您可以使用rowspan。

根据您的评论查找以下更新的摘录。

＆＃13;

$('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');
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

更新1 ：我刚刚根据您的评论更新了脚本。注意：如果您的行数超过2，请确保无法正常工作。

＆＃13;

$('.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');
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

悬停在一行上时如何突出显示多行

1 个答案: