想用JS实现以下效果！！！！请帮助！！

<script>
var isClick = false;
var bgColor = 'red';function _click(obj){
isClick = true;
obj.bgColor = bgColor;
}function _over(obj){
obj.bgColor = bgColor;
}function _out(obj){
if(!isClick){
obj.bgColor = "";
}
}
</script>
<table>
<tr>
<td onmouseover="_over(this);" onmouseout="_out(this);" onClick="_click(this);">dfasfdasfsafs</td>
</tr>
</table>

解决方案 »

  1.   

    建议楼上的在_over()方法里也加上isClick的判断，不能因为显示的颜色一样就每次都执行对吧，呵呵
      

  2.   

    这个效果用css控制会更好一点~
      

  3.   

    <html>
    <head>
    </head>
    <body><table id="table">
    <tr>
    <td onmouseover="mouseover()" onmouseout="mouseout()" onclick="aclick()">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
    </tr>
    </table><script language="javascript">
    function mouseover()
    {
    event.srcElement.bgColor="red";
    }

    function mouseout()
    {
    event.srcElement.bgColor="";
    } function aclick()
    {
    event.srcElement.onmouseover=null;
    event.srcElement.onmouseout=null
    }</script>
    </body>
    </html>
      

  4.   

    joejoe1991()  我觉得他的方法比较好
    谢谢各位的帮助！
      

  5.   

    joejoe1991()  你的方法不对，我的感觉又错了，哎大家说的方法都不对，没有经验验证
      

  6.   

    joejoe1991和glvicky的，我都跑过，表面上看，都能达到你要的效果
      

  7.   

    支持    glvicky      //FIREFOX下跑过再来看
      

  8.   

    大家要充分理解我的意思,我指的不是一个<TD>SS</TD>是多个,假如只有一个,这个做法是对的,要是多个就不对了,我说的是多个,我不说大家也应该知道啊!
    如:
    <td>1</td><td>2</td><td>3</td>
    当鼠标放在1或2或3上面时,分别显示背景,当鼠标移开1或2或3时,隐藏背景
    当鼠标单击1或2或3时,分别只停留在某一个TD上,其它TD背景隐藏,不知道大家明白了没有?
      

  9.   

    <style type="text/css">
    INPUT.FocuSelect {
    gotfocu: expression(onfocus=function(){
        if(this.type!="button"&&this.type!="submit"&&this.type!="reset") this.select();}
    )
    }</style>我知道你说的是这种效果，不过css实现的话，会有很多重复执行问题，特别是mousemove，条件不好设置，所以造成严重的效率问题。
      

  10.   

    <style type="text/css">
    <!--
    TD.Edit {
    mouse: expression(
    onmouseover=function(){this.style.background='#CCCCCC'},
    onmouseout=function(){this.style.background=''},
    );
    key: expression(
    onkeypress=function(){this.innerText+=event.keyCode;},
    );
    }
    -->
    </style>
    <table border="1">
      <tr>
        <td width="30" height="30" onkeypress="" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
    </table>点击不变要用static
      

  11.   

    key: expression(
    onkeypress=function(){this.innerText+=event.keyCode;},
    );这个不要
      

  12.   

    重新整理一下代码<style type="text/css">
    <!--
    TD.Edit {
    mouse: expression(
    onmouseover=function(){this.style.background='#CCCCCC'},
    onmouseout=function(){this.style.background=''}
    )
    }
    -->
    </style>
    <table border="1">
      <tr>
        <td width="30" height="30" onkeypress="" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
        <td width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
    </table>用这个方式可以，不过全局变量我没试过。
      

  13.   

    <script language="javascript">
    var tdcur="";function enterstr(){
    var td=document.getElementById(tdcur);
    td.innerText+=String.fromCharCode(event.keyCode);
    }
    document.onkeypress=enterstr;
    </script>
    <style type="text/css">
    <!--
    TD.Edit {
    mouse: expression(
    onmouseover=function(){this.style.background='#CCCCCC'},
    onmouseout=function(){if(tdcur!=this.id) this.style.background=''},
    onclick=function(){var tdPrev=document.getElementById(tdcur);if(tdPrev!=null)tdPrev.style.background='';tdcur=this.id;this.style.background='#CCCCCC'}
    )
    }
    -->
    </style>
    <table border="1">
      <tr>
        <td id=td1 width="30" height="30" onkeypress="" class="Edit">&nbsp;</td>
        <td id=td2 width="30" height="30" class="Edit">&nbsp;</td>
        <td id=td3 width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td id=td4 width="30" height="30" class="Edit">&nbsp;</td>
        <td id=td5 width="30" height="30" class="Edit">&nbsp;</td>
        <td id=td6 width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
      <tr>
        <td id=td7 width="30" height="30" class="Edit">&nbsp;</td>
        <td id=td8 width="30" height="30" class="Edit">&nbsp;</td>
        <td id=td9 width="30" height="30" class="Edit">&nbsp;</td>
      </tr>
    </table>可以使用全局变量
      

  14.   

    Clayborne(Clay) 谢谢!终于解决了!!
      

  15.   

    我先提醒你一下，不是泼冷水，如果出现页面非常慢的情况，就是说明这种方法不适用的时候，因为css的expression效率非常低下