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

</p> <p>var overcolor='#cccccc';<br /> var outcolor='#f2f3f7';<br /> var clkcolor='deeppink'; </p> <p>var pobj=null;<br /> for (var i=0;i<phx.rows.length;i++){<br /> for(var j=0;j<phx.rows[i].cells.length;j++){<br /> phx.rows[i].cells[j].onmouseover=function(){<br /> if(pobj!=this){<br /> this.bgcolor=overcolor;}}<br /> phx.rows[i].cells[j].onmouseout=function(){<br /> if(pobj!=this){<br /> this.bgcolor=outcolor;}}<br /> phx.rows[i].cells[j].onclick=function(){<br /> pobj=this;<br /> init();<br /> pobj.bgcolor=clkcolor;}<br /> }<br /> } </p> <p>function init(){<br /> for (var i=0;i<phx.rows.length;i++){<br /> for(var j=0;j<phx.rows[i].cells.length;j++){<br /> phx.rows[i].cells[j].bgcolor=outcolor;<br /> }<br /> }<br /> } </p> <p>init(); </p> <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> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
以上代码可以实现鼠标移动到单元格上，单元格变色，现在我想实现鼠标移动到某个单元格上后，整个列都变色不知道可以不可以实现呢？
</p> <p><title>如何定义表格的鼠标隔列变色行为</title> </p> <p>body {<br /> font: normal 12px auto "trebuchet ms", verdana, arial, helvetica, sans-serif;<br /> color: #4f6b72;<br /> background: #e6eae9;<br /> }<br /> .mytable {<br /> width: 80%;<br /> padding: 0;<br /> margin: 0;<br /> } </p> <p>.mytable td {<br /> border-bottom: 1px solid #c1dad7;<br /> background: #fff;<br /> font-size:12px;<br /> padding: 6px 6px 6px 0px;<br /> align:center;<br /> color: #4f6b72;<br /> } </p> <p>td.alt {<br /> background: #f5fafa;<br /> text-align:center;<br /> color: #797268;<br /> } </p> <p>td.baialt {<br /> background: #ffffff;<br /> text-align:center;<br /> color: #000;<br /> } </p> <p>td.spec {<br /> border-top: 0;<br /> background: #fff ;<br /> text-align:center;<br /> font: 12px "trebuchet ms", verdana, arial, helvetica, sans-serif;<br /> } </p> <p>td.specalt {<br /> border-top: 0;<br /> background: #f5fafa ;<br /> text-align:center;<br /> font: 12px "trebuchet ms", verdana, arial, helvetica, sans-serif;<br /> color: #797268;<br /> } </p> <p>function senfe(sid){<br /> var tds=sid.getelementsbytagname("td")<br /> for(var i=0;i<tds.length;i++){<br /> if(tds[i].classname=='alt'){<br /> tds[i].classname="baialt";<br /> }else{<br /> tds[i].classname="alt";<br /> }<br /> }<br /> } </p> <table class="mytable" cellspacing="0" id="table1"> <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> <p align="center">当鼠标经过时希望实现隔列变色（最好是反色） ，效果示例如下：</p> <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> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]
代码已经帖上来，现在鼠标移动到单元格变色
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也就是我单击了表格的某个单元格后，希望这个单元格所在的那一列都可以变色，请问如何处理呢？
</p> <p>var overcolor='#cccccc';<br /> var outcolor='#f2f3f7';<br /> var clkcolor='deeppink'; </p> <p>var pobj=null;<br /> for (var i=0;i<phx.rows.length;i++){<br /> for(var j=0;j<phx.rows[i].cells.length;j++){<br /> phx.rows[i].cells[j].onmouseover=function(){<br /> if(pobj!=this)<br /> for(var k=0;k<phx.rows.length;k++){<br /> phx.rows[k].cells[event.srcelement.cellindex].bgcolor=overcolor;<br /> }<br /> }<br /> phx.rows[i].cells[j].onmouseout=function(){<br /> if(pobj!=this)<br /> for(var k=0;k<phx.rows.length;k++){<br /> phx.rows[k].cells[event.srcelement.cellindex].bgcolor=outcolor;<br /> }<br /> }<br /> phx.rows[i].cells[j].onclick=function(){<br /> pobj=this;<br /> init();<br /> for(var k=0;k<phx.rows.length;k++){<br /> phx.rows[k].cells[event.srcelement.cellindex].bgcolor=clkcolor;<br /> }<br /> }<br /> }<br /> } </p> <p>function init(){<br /> for (var i=0;i<phx.rows.length;i++){<br /> for(var j=0;j<phx.rows[i].cells.length;j++){<br /> phx.rows[i].cells[j].bgcolor=outcolor;<br /> }<br /> }<br /> } </p> <p>init(); </p> <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> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]