几个<td>，点击后背景改变，点击另外一个<td>后，背景还原，鼠标滑动的时候不改变？

<table width=200 border=1 id="tb">
<tr>
<td onclick="tb.style.backgroundColor='red'">1</td><td onclick="tb.style.backgroundColor=''">2</td>
</tr>
</table>
是这样的么?

解决方案 »

  1.   

    <script language=javascript>
    var lastid = this;
    var firstclick=true;
    function changecolor(t,colors,colore)
    {
      var nid;
      nid=t;
      if (firstclick==true){
      firstclick=false;
      nid.bgColor=colors;
      lastid.bgColor=colore;   
      lastid=nid;
      }else if (lastid!=nid){
      nid.bgColor=colors;
      lastid.bgColor=colore;   
      lastid=nid;
      }}</script><body>
     <table border=1 bordercolor="#ffffff" >
      <tr>
       <td width=50 bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >1
       </td>
       <td width=50 bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >2
       </td>
       <td width=50 bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >3
       </td>
       <td width=50 bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >4
       </td>
       <td width=50 bordercolor="#001000" bgcolor="#dddddd" onclick="changecolor(this,'#FFFFFF','#dddddd')" >5
       </td>   
      </tr>
     </table>
    </body>
    上面的是一种方法，也可以便利对象 不过效果一样了
      

  2.   


    <style>
    .clik{background-color:#eeeeee;}
    td{width:143px;height:52px}
    </style>
    <script language="JavaScript" type="text/JavaScript">
    var whoclick=""
    function td_click(obj){
     if(whoclick!=""){
       whoclick.className="";
     }
     obj.className="clik";
     whoclick=obj;
    }
    </script>
    <table id="test" width="*" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td onClick="td_click(this)">1</td>
        <td  onClick="td_click(this)">2</td>
        <td  onClick="td_click(this)">3</td>
      </tr>
      <tr>
        <td  onClick="td_click(this)">4</td>
        <td  onClick="td_click(this)">5</td>
        <td  onClick="td_click(this)">6</td>
      </tr>
      <tr>
        <td  onClick="td_click(this)">7</td>
        <td  onClick="td_click(this)">8</td>
        <td  onClick="td_click(this)">9</td>
      </tr>
    </table>
      

  3.   

    www.pniu.net/media/list.asp我刚做的
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <style>
    .a1 { color:red }
    .a2 { color:yellow }
    </style>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function ChangeCSS(){ var td = event.srcElement;
    var objtb = td.parentElement;
    var lenobjtb = objtb.childNodes.length; for(i=0;i<lenobjtb;i++){
    objtb.childNodes[i].className = "a1";
    } td.className = "a2";
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <table width="90%"  border="0" cellspacing="0" cellpadding="0" onclick="ChangeCSS()">
      <tr>
        <td class="a2">11111</td>
        <td class="a1">2222</td>
        <td class="a1">3333</td>
        <td class="a1">4444</td>
        <td class="a1">5555</td>
      </tr>
    </table>
    </BODY>