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

时间：2022-01-28 09:23:02|栏目：JavaScript代码|点击：次

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

<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需再刷新一下页面才能执行]

上一篇：ES6函数实现排它两种写法解析

栏目：JavaScript代码

下一篇：JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)

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

本文地址：http://www.codeinn.net/misctech/191642.html

更多JavaScript代码

JavaScript代码

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

阅读排行

推荐教程