Question

我有两张桌子并排放置：

<table id="Table1" class="table table-hover">
    <tbody>
       <tr>
           <td>Col 1</td>
           <td>Col 2 </td>
       </tr>
    </tbody>
</table>

<table id="Table2" class="table table-hover">
    <tbody>
       <tr>
           <td>Col 1</td>
           <td>Col 2 </td>
       </tr>
    </tbody>
</table>

我想让鼠标悬停上的行突出显示效果跨越行，以便它们看起来好像是同一个表。即当用户的光标在表1中的Col 2上时，表1中的Col-2也将突出显示。

突出显示标记时没有添加任何类，所以我认为我不能使用on-hover事件然后使用jQuery在其余行中应用该类。

请注意，我使用的是Bootstrap 3.0.3。

Answer 1

试试这个

$('#Table1 tbody tr td').mouseover(function(){
    var ro=$(this).closest('tr').index()
    var col=$(this).index()
    $(this).addClass('hov').siblings().removeClass('hov')
    $('#Table2 tr:eq('+ro+')').find('td:eq('+col+')').addClass('hov').siblings().removeClass('hov')
});
$('#Table1 tbody tr td').mouseleave(function(){
    var ro=$(this).closest('tr').index()
    var col=$(this).index()
    $(this).removeClass('hov')
    $('#Table2 tr:eq('+ro+')').find('td:eq('+col+')').removeClass('hov')
});

DEMO

Bootstrap 3 - 将鼠标悬停在另一个表中的某一行上时突出显示表行

1 个答案: