JS兼容问题，IE正常，FF不起作用

你的 tBodies 是個什麽東西？

解决方案 »

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

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.sec1{
background:#33FFFF
}
.sec2{
background:#FFCCFF
}
</style>
<script language="javascript" type="text/javascript">
function  secBoard(n)
{
var secTable=document.getElementById('secTable');//===================
for(var i=0;i<secTable.rows[0].cells.length;i++)
{
  if(i==n)secTable.rows[0].cells[i].className="sec2";
  else secTable.rows[0].cells[i].className="sec1";
}
var tbs=document.getElementById('mainTable').getElementsByTagName('tbody');//===================
for(var i=0;i<tbs.length;i++)
{
  if(i==n)tbs[i].style.display="";
  else tbs[i].style.display="none";
}
}
</script>
</head>
<body>
<form name="test" action="" >
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="secTable">
  <tr>
    <td width="20%" height="32" align="center" class="sec2" onMouseOver="secBoard(0)">1</td>
    <td width="20%" align="center" class="sec1" onMouseOver="secBoard(1)">2</td><td width="20%" align="center" class="sec1" onMouseOver="secBoard(2)">3</td>
  </tr>
</table>
<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" id="mainTable">
<tbody style="display:block;">
  <tr>
    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">1</td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a1" value="a1" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a2" value="a2" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a3" value="" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="a4" value="" /></td>
  </tr>
</tbody>
  <tbody style="display:none;">
  <tr>
    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">2</td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b1" value="b1" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b2" value="b2" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b3" value="" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="b4" value="" /></td>
  </tr>
</tbody>
<tbody style="display:none;">
  <tr>
    <td width="20%" height="32" align="center" bgcolor="#FFFFFF">3</td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c1" value="c1" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c2" value="c2" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c3" value="" /></td>
    <td align="center" bgcolor="#FFFFFF"><input type="text" name="c4" value="" /></td>
  </tr>
</tbody>
</table>
</form>
</body>
</html>
在FF下可以滑动，但是在FF有个问题，就是初始内容宽度不对，还有就是鼠标放上面切换内容会多出来一行。
你自己设置的样式不对<table width="100%" border="1" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" id="mainTable">
<tbody style="display:block;">
删除这个style属性没事不要把display设置成block