<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>测试</TITLE>
<style type="text/css">
.A1 { color: red;  background-color: gold; text-decoration:underline; }
.A2 { color: red;  background-color: #ccffcc; text-decoration:underline;}
</style>
<SCRIPT language="javascript">
function a(n)
{ for(i=0;i<b.cells.length;i++){
  b.cells[i].className="A1"
  b.cells[n].className="A2"}
  for(i=0;i<c.tBodies.length;i++){
  c.tBodies[i].style.display="none";
  c.tBodies[n].style.display="block";} 
}
</SCRIPT>
</HEAD><table border=1 cellspacing=1 cellpadding=2 width=300 id=b align=center>
  <tr align=center>
    <td class=A2 onClick=a(0)>张三</td>
    <td class=A2>未确定人员</td>
    <td class=A1 onClick=a(2)>李四</td>
    <td class=A1 onClick=a(3)>王五</td>
  </tr>
</table><table border=0 cellspacing=0 cellpadding=0 width=320 id=c align=center>
  <tbody style=display:block><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
    <tr>
      <td align=center>通关<br>获得王牌称号</td>
    </tr></table></td></tr>
  </tbody>  <tbody style=display:none><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
    </table></td></tr>
  </tbody>  <tbody style=display:none><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
    <tr>
      <td align=center>未过第一关<br>无称号</td>
    </tr></table></td></tr>
  </tbody>  <tbody style=display:none><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
    <tr>
      <td align=center>过十关<br>获得精锐称号</td>
    </tr></table></td></tr>
  </tbody>
</table>请问:
1、在这段代码中,要如何才能让“未确定人员”,不管在其他哪一个人的情况下,背景色都保持淡色而不会变成金色。
2、如何让鼠标指针指向“李四”、“王五”时,下面的表格就会自动切换。谢谢先了。

解决方案 »

  1.   

    这个跟function有啥关系<HEAD>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">
    <TITLE>测试</TITLE>
    <style type="text/css">
    .A1 { color: red; background-color: gold; text-decoration:underline; }
    .A2 { color: red; background-color: #ccffcc; text-decoration:underline;}
    </style>
    <SCRIPT language="javascript">
    function a(n)
    {
    var b = document.getElementById("b"),c=document.getElementById("c");
    b.cells = b.rows[0].cells;
    for(i=0;i<b.cells.length;i++)
    b.cells[i].className="A1";
      b.cells[n].className="A2";
      b.cells[1].className="A2";  for(i=0;i<c.tBodies.length;i++)
    c.tBodies[i].style.display="none";
      c.tBodies[n].style.display="block"; 
    }
    </SCRIPT>
    </HEAD><table border=1 cellspacing=1 cellpadding=2 width=300 id=b align=center>
      <tr align=center>
      <td class=A2 onClick=a(0)>张三</td>
      <td class=A2>未确定人员</td>
      <td class=A1 onmouseover=a(2)>李四</td>
      <td class=A1 onmouseover=a(3)>王五</td>
      </tr>
    </table><table border=0 cellspacing=0 cellpadding=0 width=320 id=c align=center>
      <tbody style=display:block><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
      <tr>
      <td align=center>通关<br>获得王牌称号</td>
      </tr></table></td></tr>
      </tbody>  <tbody style=display:none><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
      </table></td></tr>
      </tbody>  <tbody style=display:none><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
      <tr>
      <td align=center>未过第一关<br>无称号</td>
      </tr></table></td></tr>
      </tbody>  <tbody style=display:none><tr><td><table border=1 cellspacing=1 cellpadding=2 width=300 align=center>
      <tr>
      <td align=center>过十关<br>获得精锐称号</td>
      </tr></table></td></tr>
      </tbody>
    </table
      

  2.   

    把 1 跳过就行了:
    <SCRIPT language="javascript">
    function a(n)
    { for(i=0;i<b.cells.length;i++){
      if(i!=1){b.cells[i].className="A1"
      b.cells[n].className="A2"}
     }
      for(i=0;i<c.tBodies.length;i++){
      c.tBodies[i].style.display="none";
      c.tBodies[n].style.display="block";}  
    }
    </SCRIPT>
      

  3.   

    第一个问题,加个判断条件即可。function a(n)
    { for(i=0;i<b.cells.length;i++){
      if(i==1)continue;  //加上这一句,跳过“未确定人员”
      b.cells[i].className="A1"
      b.cells[n].className="A2"}
      for(i=0;i<c.tBodies.length;i++){
      c.tBodies[i].style.display="none";
      c.tBodies[n].style.display="block";}  
    }第二个问题,把onclick事件改为onmouseover。<table border=1 cellspacing=1 cellpadding=2 width=300 id=b align=center>
      <tr align=center>
      <td class=A2 onmouseover=a(0)>张三</td>
      <td class=A2>未确定人员</td>
      <td class=A1 onmouseover=a(2)>李四</td>
      <td class=A1 onmouseover=a(3)>王五</td>
      </tr>
    </table>