鼠標移動到某個單元格上后，整個列都變色的實現方法

2019-11-21 02:19:41

字體：大中小

來源：轉載

供稿：網友

以上代碼可以實現鼠標移動到單元格上，單元格變色，現在我想實現鼠標移動到某個單元格上后，整個列都變色不知道可以不可以實現呢？

<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>           <div align="center">           <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">當鼠標經過時希望實現隔列變色（最好是反色） ，效果示例如下：</p>             <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 全選注:如需引入外部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也就是我單擊了表格的某個單元格后，希望這個單元格所在的那一列都可以變色，請問如何處理呢？

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一篇：xWin之JS版(2-26更新)第1/2頁

下一篇：如何豐富alt屬性的顯示效果