时间戳

首页 > 解决方案 > 如何通过将鼠标悬停在另一个 div 上来突出显示表格行？

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

问题描述

我有两张桌子

<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.) 当“Select tableTeam1,tableTeam2 from matches where id='match1'”时如何使用 php 数据库请求来完成

非常感谢你提前

标签： javascriptphphtmljquerycss

解决方案

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

$('#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>

推荐阅读