Bootstrap 3 -当鼠标悬停在另一个表中的某行上时，高亮显示表行

ut6juiuv 于 2023-08-01 发布在 Bootstrap

关注(0)|答案(1)|浏览(116)

我有两张table并排放置：

<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。

twitter-bootstrap

来源：https://stackoverflow.com/questions/20812172/bootstrap-3-highlight-table-row-when-hovering-over-a-certain-row-in-another-ta

1条答案

按热度按时间

fhg3lkii1#

试试这个

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

赞(0）回复(0）举报 2023-08-01

我来回答

Bootstrap 3 -当鼠标悬停在另一个表中的某行上时，高亮显示表行

1条答案

相关问题

热门标签

最新问答