html - 如何在两个不同表格的同一行上应用悬停？

Question

我的 html 中有两个不同的表，假设它们都具有相同的数据集合 - 这意味着这些行代表集合中的相同对象。我想应用以下功能:当我将鼠标悬停在表 1 中的第 N 行时，它会突出显示表 1 中的第 N 行和表 2 中的同一行。我能够完成它，但是我不得不操纵我的收藏- 我在对象上添加了 .hover 属性，并将其视为鼠标进入和鼠标离开时的标志，并根据此添加了特定样式。但是，我知道这不应该以这种方式完成 - 因为它打破了双向数据绑定(bind)规则。

关于如何在不操纵我的数据的情况下实现这一目标的任何想法？

Answer 1

您可以通过使用少量 jQuery 来实现:

var tr_class;
$('.table1 tr').hover(
  function(){
    tr_class = $('this').attr('class');
    $('this').addClass('highlightBg');
    $('.table2 ' + tr_class).addClass('highlightBg');
}, 
  function(){
   $(this).removeClass('highlightBg');
   $('table2 ' + tr_class).removeClass('highlightBg');
});
$('.table2 tr').hover(
  function(){
    tr_class = $('this').attr('class');
    $('this').addClass('highlightBg');
    $('.table1 ' + tr_class).addClass('highlightBg');
}, 
  function(){
   $(this).removeClass('highlightBg');
   $('table1 ' + tr_class).removeClass('highlightBg');
});

你的表行都需要有一个像行号这样的类，例如计算它们:

<tr class='1'>...</tr>
<tr class='2'>...</tr>

.highlightBg 定义高亮状态的背景色，在这个例子中.table1 和.table2 是表格的类。

认为应该完成工作。