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

发布于 2016-12-01 23:47:02 | 178 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

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

<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">当鼠标经过时希望实现隔列变色（最好是反色） ，效果示例如下：</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也就是我单击了表格的某个单元格后，希望这个单元格所在的那一列都可以变色，请问如何处理呢？

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 全选注:如需引入外部Js需刷新才能执行]

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

JavaScript客户端脚本语言

后端技术

前端技术

数据库

热门框架

常用IDE

其他