Javascript 两个不同的html表突出显示相同的行顺序

我有一个问题，我正在尝试对html表进行一些操作。我有两张桌子， 当我将鼠标悬停在第一个表的第一行时，它应该高亮显示两个表的两行

我找到了一个解决方案，在制作这个简单的函数时：

<script type="text/javascript">
function matchrow(){
document.getElementById('row1').style.backgroundColor='#f5f5f5'; 
}
function unmatchrow(){
document.getElementById('row1').style.backgroundColor='white';
}        
</script>    

函数matchrow（）{
document.getElementById（'row1'）.style.backgroundColor='#f5'；
}
函数unmatchrow（）{
document.getElementById（'row1'）.style.backgroundColor='white'；
}        

在第一张表上，我有：

<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >

<tr id="row1" >

在第二张表上，我有：

<tr onmouseover="matchrow()" onmouseout="dismatchrow()" >

<tr id="row1" >

因此，当我将鼠标放在第一个表的第一行上时，第二个表的第一行将高亮显示

我的问题是，如何使它适用于每一行，特别是当它是动态表时。

---

希望我说的很清楚。

您可以在函数中使用div id作为参数

 <tr onmouseover="matchrow('row1')" onmouseout="dismatchrow('row1')">

 function matchrow(divid){
      document.getElementById(divid).style.backgroundcolor='#F5F5F5';
 }
 function dismatchrow(divid){
      document.getElementById(divid).style.backgroundcolor='white';
 }

函数matchrow（divid）{
document.getElementById（divid）.style.backgroundcolor='#f5'；
}
函数dismatchrow（divid）{
document.getElementById（divid.style.backgroundcolor='white'；
}

您可以使用jQuery进行此操作

使用和函数

一种方法：

HTML:

---

可以找到一个工作示例。

我已经用jQuery实现了这一点。它不使用突兀的JS，也不需要额外的行ID。 而且，CSS类比内联样式更可取

HTML:

JS:

---

这里是现场小提琴：

谢谢，效果很好。但是，如果表行是动态添加的，您是否有一些线索，如何做到这一点？无论如何，谢谢你的提示！可以使用循环函数更改每行的div id

<table id="t1">
    <tr><td>......</td></tr>
    <tr><td>......</td></tr>
</table>
<br/>
<table id="t2">
    <tr><td>......</td></tr>
    <tr><td>......</td></tr>
</table>

tr.active > td
{
    background-color:#f00;
}

$(function(){
    $("#t1 tr").hover(
        function(){
            $(this).addClass('active');
            $('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').addClass('active');
        },
        function(){
            $(this).removeClass('active');
            $('#t2 tr:eq(' + $('#t1 tr').index($(this)) + ')').removeClass('active');
        }
    );
});