如何通过将鼠标悬停在另一个 div 上来突出显示表格行？答案

【问题标题】：How to highlight table rows by hover over another div?如何通过将鼠标悬停在另一个 div 上来突出显示表格行？
【发布时间】：2021-04-10 16:20:34
【问题描述】：

我有两张桌子

<table id='standings'>
<tr id='tableTeam1'>
<td>Team1</td>
</tr>
<tr id='tableTeam2'>
<td>Team2</td>
</tr>
<tr id='tableTeam3'>
<td>Team3</td>
</tr>
</table>




<table id='matches'>
<tr id='match1'>
<td id='matchTeam1>Team1</TD>
<td class='score'> 22-31</td>
<td id='matchTeam3>Team3</td>
</tr>
</table>

我的目标是将鼠标悬停在第二个表中 ID 为“match1”的行上，并突出显示 ID 为“tableTeam1”和“tableTeam3”的行

1.) js/css怎么可能？

2.) 如何通过使用 php 数据库请求来完成 "从 id='match1' 的匹配项中选择 tableTeam1,tableTeam2"

非常感谢您

【问题讨论】：

标签： javascript php html jquery css

【解决方案1】：

试试这个：

$('#match1')
    .mouseenter(function() {
        $('#tableTeam1').addClass('highlighted');
    })
    .mouseleave(function() {
        $('#tableTeam1').removeClass('highlighted');
    })

您还需要在此处添加一些 CSS，例如：

.highlighted { background-color: red;}

我不知道您的数据结构，但我认为应该是这样的：

...
<tr id="<?php echo $data['column_name']; ?>" <?php echo ($data['column_name'] === 'match1')? 'class="highlighted"' : ''; ?>>
...

【讨论】：

【解决方案2】：

将您的团队编号放在匹配行中的数据属性中，然后解析它们以匹配另一个表中的元素并在它们上切换一个类是相当简单的

$('#matches .match-row').hover(function() {
  const teams = $(this).data('teams');
  teams.forEach(num => $('#tableTeam' + num).toggleClass('active'))
})

tr.active {
  color: red
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='standings' border=1>
  <tr id='tableTeam1'>
    <td>Team1</td>
  </tr>
  <tr id='tableTeam2'>
    <td>Team2</td>
  </tr>
  <tr id='tableTeam3'>
    <td>Team3</td>
  </tr>
</table>

<table id='matches' border=1>
  <tr class="match-row" data-teams="[1,3]">
    <td>Team1</td>
    <td class='score'> 22-31</td>
    <td>Team3</td>
  </tr>
  <tr class="match-row" data-teams="[2,3]">
    <td>Team2</td>
    <td class='score'> 55-1 Blowout!</td>
    <td>Team3</td>
  </tr>
</table>

【讨论】：