日韩天天综合网_野战两个奶头被亲到高潮_亚洲日韩欧美精品综合_av女人天堂污污污_视频一区**字幕无弹窗_国产亚洲欧美小视频_国内性爱精品在线免费视频_国产一级电影在线播放_日韩欧美内地福利_亚洲一二三不卡片区

每日更新|TOP排行榜|Tag標(biāo)簽|充值

無憂首頁(yè) 網(wǎng)頁(yè)模板程序模板建站教程視頻教程網(wǎng)頁(yè)特效圖標(biāo)素材字體下載站長(zhǎng)工具站長(zhǎng)問答

Div+Css教程模板無憂>建站教程>Div+Css教程>XHTML教程>

收藏分享查看評(píng)論 XHTML教程

Table布局中單元格background-color鼠標(biāo)響應(yīng)的JS代碼_XHTML教程

編輯Tag賺U幣

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　上面的是此效果的效果圖。
　　下面是實(shí)現(xiàn)此效果的代碼：

代碼調(diào)試框 [www.hl5o.cn]

<!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>Table布局中單元格background-color鼠標(biāo)響應(yīng)的JS代碼</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">

.light {
        font: normal 9pt "宋體";
        color: #000000;
        text-decoration: none;
        background: #FFFFFF;
        cursor: default;
}
.tdstyle {
        border: 1px dashed #0099CC;
}

</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>

[ 可先修改部分代碼再運(yùn)行查看效果 ]

　　此代碼在FF中點(diǎn)擊的效果會(huì)有些問題，當(dāng)點(diǎn)擊第一行單元格變色，點(diǎn)擊第二個(gè)時(shí)第一個(gè)顏色不恢復(fù)原來無色的狀態(tài)。
　　

網(wǎng)站制作在線視頻教程 網(wǎng)站制作視頻教程打包下載

CSS視頻教程

CSS設(shè)計(jì)徹底研究視頻教程

網(wǎng)頁(yè)制作基礎(chǔ)教程

網(wǎng)站重構(gòu)&web標(biāo)準(zhǔn)設(shè)計(jì)教程

div css視頻教程

DIV + CSS 入門視頻教程，只用記事本編寫代碼演示

精通CSS+DIV網(wǎng)頁(yè)樣式與布局配套視頻教程

別具光芒：DIV+CSS網(wǎng)頁(yè)布局與美化

DIV.CSS應(yīng)用視頻教程(DIV+CSS)

來源：無憂整理/所屬分類：XHTML教程/更新時(shí)間：2007-08-26

[收藏][報(bào)錯(cuò)][返回列表]

相關(guān)XHTML教程：

XHTML教程Rss訂閱Div+Css教程搜索

XHTML教程推薦

猜你也喜歡看這些

相關(guān)鏈接：
復(fù)制本頁(yè)鏈接| 搜索Table布局中單元格background-color鼠標(biāo)響應(yīng)的JS代碼
教程說明：
XHTML教程-Table布局中單元格background-color鼠標(biāo)響應(yīng)的JS代碼。