有两个行数相同的表，如何点击一个表使行变色时，让另一个表的对应行也变色

<SCRIPT LANGUAGE="JScript">
var n = null;
function doit(obj){
if(n!=null){
   document.getElementById("tb1").rows[n].style.backgroundColor="#FFFFFF";
   document.getElementById("tb2").rows[n].style.backgroundColor="#FFFFFF";
}
n = obj.rowIndex;
   document.getElementById("tb1").rows[n].style.backgroundColor="#CCCCCC";
   document.getElementById("tb2").rows[n].style.backgroundColor="#CCCCCC";
}
</SCRIPT><table id="tb1">
<tr onclick="doit(this);"><td>xxxx</td></tr>
<tr onclick="doit(this);"><td>xxxx</td></tr>
<tr onclick="doit(this);"><td>xxxx</td></tr>
</table><table id="tb2">
<tr onclick="doit(this);"><td>xxxx</td></tr>
<tr onclick="doit(this);"><td>xxxx</td></tr>
<tr onclick="doit(this);"><td>xxxx</td></tr>
</table>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

看这样成不？
<html>
<head>
<script language="javascript">
var lastIndex = -1;
function trClick(sender)
{
var table1 = document.getElementById("table1");
var table2 = document.getElementById("table2");
var rowIndex = sender.rowIndex;
if (lastIndex == rowIndex) return; // 一样就不变了
if (lastIndex >= 0) // 恢复上次修改
{
table1.rows[lastIndex].bgColor = document.bgColor;
table2.rows[lastIndex].bgColor = document.bgColor;
}
table1.rows[rowIndex].bgColor = "#FF00FF";
table2.rows[rowIndex].bgColor = "#FF00FF";
lastIndex = rowIndex;
}
</script>
<body>
<table id="table1" border="1" width="100%" id="table1">
<tr onclick="trClick(this);">
<td>1</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>2</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>3</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>4</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>5</td>
<td>　</td>
</tr>
</table>
<table id="table2" border="1" width="100%" id="table1">
<tr onclick="trClick(this);">
<td>1</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>2</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>3</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>4</td>
<td>　</td>
</tr>
<tr onclick="trClick(this);">
<td>5</td>
<td>　</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title></head><body>
<div style="width:600px" align="center">
<table id="tb1" width="200" border="1" align="left">
  <tr>
    <td>1</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>2</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>3</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>4</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>5</td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<table id="tb2" width="200" border="1" align="right">
  <tr>
    <td>1</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>2</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>3</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>4</td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>5</td>
    <td> </td>
    <td> </td>
  </tr>
</table>
<script language="javascript">
function $ (id)
{
return document.getElementById(id);
}

function init()
{
var tb1 = $("tb1");
var tb2 = $("tb2");

for(var i=0;i<tb1.rows.length;i++)
{
tb1.rows[i].onclick= function(){eval("color1(this)");};
tb2.rows[i].onclick= function(){eval("color2(this)");};
}
}
function color1(obj)
{
var tb1 = $("tb1");
var tb2 = $("tb2"); for(var i=0;i<tb1.rows.length;i++)
{
tb1.rows[i].bgColor = "";
}

obj.bgColor = "#A0A0A4";
for(var i=0;i<tb1.rows.length;i++)
{
tb2.rows[i].bgColor = tb1.rows[i].bgColor;
}
}
function color2(obj)
{
var tb1 = $("tb1");
var tb2 = $("tb2"); for(var i=0;i<tb1.rows.length;i++)
{
tb2.rows[i].bgColor = "";
}

obj.bgColor = "#A0A0A4";
for(var i=0;i<tb1.rows.length;i++)
{
tb1.rows[i].bgColor = tb2.rows[i].bgColor;
}
}init();
</script>
</div>
</body>
</html>