一个页面中2个table，如何实现鼠标放上去的时候2行背景色同时改变

页面中有2个table,table1,table2,连在一起，当鼠标移动到其中一个table的某一行上时，该行的背景颜色改变，现在能实现table1和table2的单独改变，即鼠标放到table1上时，table1被选中的哪一行改变，可是table2中跟他对应的同一行没有变色。
现在想实现2个table同时变色，请问如何实现。

10 个解决方案

#1

自己的帖子，自己顶

#2

js
css.

#3

<script language="javascript">

var tables=["table1","table2"];//在这里填上表格ID,可以实现若干个表格同时改变

for(var i=0;i<tables.length;i++){
var tb = document.getElementById(tables[i]);
tb.onmouseover=function(){
var tr = getTr(event.srcElement);
if(tr==null)return;
ChangeBackColor(tr.rowIndex,"#aaaaaa");
}

tb.onmouseout=function(){
var tr = getTr(event.srcElement);
if(tr==null)return;
ChangeBackColor(tr.rowIndex,"#ffffff");
}
}

function ChangeBackColor(rowIndex,backColor){
for(var i=0;i<tables.length;i++)
document.getElementById(tables[i]).rows[rowIndex].style.backgroundColor=backColor;
}

function getTr(obj){
if(obj.tagName!="TD") return null;
return obj.parentElement;
}
</script>

#4

你好，非常感谢你的回帖 
 请问，tb.onmouseout=function(){
这段是什么意思，这个代码应该加到哪里。

#5

请问我只需要将这段代码放到脚本里面就可以了吗

#6

放在脚本里面就可以了吧

#7

我将2个table都指定了id，可是
提示tb为空或者不是对象
<table id="table1"..........
<table id="table2"..........

#8

把代码放在你表格代码后面,或者直接放到</html>以后

#9

tb.onmouseout=function()
这个的意思是。tb的一个事件，onmouseout,这个事件触发的函数是后面的function();

#10

非常感谢，结贴