当前位置：首页 > 技术 > 用Javascript实现表格单元格背景色鼠标响应

用Javascript实现表格单元格背景色鼠标响应

枭杳发布于 2009年04月01日
分类：技术
阅读(481)
评论(0)

<!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>
<script language="javascript">
<!--
var aTDClick=new Array(3);
function onColor(td,n)
{
    if(!aTDClick[n-1]){
                td.style.backgroundColor='#FFFF99';
            td.style.color='#0600FF';
        }else{
                td.style.backgroundColor='#FF6699';
            td.style.color='#0600FF';
        }
}

function onClickColor(td,n)
{
        switch(n)
        {
                case 1:
                        if(aTDClick[0]!==true){
                                td.style.backgroundColor='#FF6699';
                            td.style.color='#0600FF';
                                aTDClick[0]=true;
                        }else{
                                TR1.style.backgroundColor='';
                            TR1.style.color='';
                                aTDClick[0]=false;
                        }
                        TR2.style.backgroundColor='';
                        TR2.style.color='';
                        TR3.style.backgroundColor='';
                        TR3.style.color='';
                        aTDClick[1]=false;
                        aTDClick[2]=false;
                        break;
                case 2:
                        if(aTDClick[1]!==true){
                                td.style.backgroundColor='#FF6699';
                            td.style.color='#0600FF';
                                aTDClick[1]=true;
                        }else{
                                TR2.style.backgroundColor='';
                            TR2.style.color='';
                                aTDClick[1]=false;
                        }
                        TR1.style.backgroundColor='';
                        TR1.style.color='';
                        TR3.style.backgroundColor='';
                        TR3.style.color='';
                        aTDClick[0]=false;
                        aTDClick[2]=false;
                        break;
                case 3:
                        if(aTDClick[2]!==true){
                                td.style.backgroundColor='#FF6699';
                            td.style.color='#0600FF';
                                aTDClick[2]=true;
                        }else{
                                TR3.style.backgroundColor='';
                            TR3.style.color='';
                                aTDClick[2]=false;
                        }
                        TR2.style.backgroundColor='';
                        TR2.style.color='';
                        TR1.style.backgroundColor='';
                        TR1.style.color='';
                        aTDClick[1]=false;
                        aTDClick[0]=false;
                        break;
        }
}

function offColor(td,n)
{
    if(!aTDClick[n-1]){
                td.style.backgroundColor='';
            td.style.color='';
        }else{
                td.style.backgroundColor='#FF6699';
            td.style.color='#0600FF';
        }
}

-->
</script>
<style type="text/css">

</style>
</head>

<body>
<table width="100%" border="0" cellspacing="4" cellpadding="0">
<tr id="TR1" class="light" onMouseOver="onColor(this,1);" onMouseOut="offColor(this,1);" onClick="onClickColor(this,1);">
    <td class="tdstyle" height="25">第一行</td>
</tr>
<tr id="TR2" class="light" onMouseOver="onColor(this,2);" onMouseOut="offColor(this,2);" onClick="onClickColor(this,2);">
    <td class="tdstyle" height="25">第二行</td>
</tr>
<tr id="TR3" class="light" onMouseOver="onColor(this,3);" onMouseOut="offColor(this,3);" onClick="onClickColor(this,3);">
    <td class="tdstyle" height="25">第三行</td>
</tr>
</table>

</body>
</html>

标签：暂无标签

相关推荐

评论 0