页面导航：首页 → 网络编程 → JavaScript → 表单特效 → 正文内容

鼠标移动到某个单元格上后，整个列都变色的实现方法

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:
[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

以上代码可以实现鼠标移动到单元格上，单元格变色，现在我想实现鼠标移动到某个单元格上后，整个列都变色不知道可以不可以实现呢？

点击运行可以看到效果:

<html>

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>如何定义表格的鼠标隔列变色行为</title> 
<style> 
body { 
    font: normal 12px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #4f6b72; 
    background: #E6EAE9; 
} 
.mytable { 
    width: 80%; 
    padding: 0; 
    margin: 0; 
}

.mytable td { 
    border-bottom: 1px solid #C1DAD7; 
    background: #fff; 
    font-size:12px; 
    padding: 6px 6px 6px 0px; 
    align:center; 
    color: #4f6b72; 
}

td.alt { 
    background: #F5FAFA; 
    text-align:center; 
    color: #797268; 
}

td.baialt { 
    background: #FFFFFF; 
    text-align:center; 
    color: #000; 
}

td.spec { 
    border-top: 0; 
    background: #fff ; 
    text-align:center; 
    font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
}

td.specalt { 
    border-top: 0; 
    background: #f5fafa ; 
    text-align:center; 
    font: 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #797268; 
} 
</style>

</head> 
<script language="javascript"> 
function senfe(sid){ 
    var tds=sid.getElementsByTagName("td") 
    for(var i=0;i<tds.length;i++){ 
        if(tds[i].className=='alt'){ 
            tds[i].className="baialt"; 
        }else{ 
            tds[i].className="alt"; 
        } 
    } 
} 
</script> 
<body>

<table class=mytable cellspacing="0" id="table1" onmouseover="senfe(this)" onmouseout="senfe(this)"> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
        <tr> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
        </tr> 
          </table> 
           
            </div> 
          <p align="center">当鼠标经过时希望实现隔列变色（最好是反色） ，效果示例如下： 
            <div align="center"> 
          <table class=mytable cellspacing="0" id="table2"> 
        <tr align="center"> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
            <td class="alt" height="45"></td> 
            <td class="baialt" height="45"></td> 
        </tr> 
          </table> 
           
            </div>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

代码已经帖上来，现在鼠标移动到单元格变色
phx.rows[i].cells[j].onmouseover=function()
        {
         if(pObj!=this){
                         this.bgColor=overcolor;}
              }
以及移出单元格变色
phx.rows[i].cells[j].onmouseout=function()
              {
        if(pObj!=this){
                        this.bgColor=outcolor;}
              }
都已经解决·
剩下的问题是phx.rows[i].cells[j].onclick也就是我单击了表格的某个单元格后，希望这个单元格所在的那一列都可以变色，请问如何处理呢？

点击运行可以看到效果:

var overcolor='#cccccc'; 
var outcolor='#f2f3f7'; 
var clkcolor='deeppink';

function init(){ 
for (var i=0;i<phx.rows.length;i++){ 
    for(var j=0;j<phx.rows[i].cells.length;j++){     
phx.rows[i].cells[j].bgColor=outcolor; 
    } 
} 
}

init();

</script> 
<table width="80%" border="0" align="center" cellpadding="2" cellspacing="2" bgcolor="#f4f4f4" id="phx"> 
<tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td></tr></table>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]