Question

我有三张桌子，并排以允许溢出。

我需要链接所有三个表上的表行，这样当它挂在一个表上时，所有表中的行都会突出显示。

非常感谢任何帮助。

示例：

<table class="one" width="33.3%">
  <tr>
    <td>Example</td>
  </tr>
</table>
<table class="two" width="33.3%">
  <tr>
     <td>Example</td>
  </tr>
</table>
<table class="three" width="33.3%">
  <tr>
    <td>Example</td>
  </tr>
</table>

Answer 1

您可以将jquery的悬停方法与nth-child选择器结合使用。

$("#parentDiv table tr").hover(function(){
    // on enter
    var childNum = $(this).index() + 1;
    $('#parentDiv table tr:nth-child('+childNum+')').css("background-color", "pink");
    }, function(){
    // on leave
    var childNum = $(this).index() + 1;
    $('#parentDiv table tr:nth-child('+childNum+')').css("background-color", "white");
});

将#parentDiv更改为您需要突出显示的表的公共父元素。

示例：https://jsfiddle.net/z7r8oc57/

在悬停时突出显示多个表中的表行

1 个答案: