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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 鼠标移动到某个单元格上后，整个列都变色的实现方法

Javascript: javascript if 的简化代码; javascript下with 的简化代码写法; javascript简化代码 A=alert w=document.writeln; js 调整select 位置的函数; JS应用之禁止抓屏、复制、打印; js加解密脚本解密; js＋vml创建3D页面效果代码; javascript简写效果“神秘的眼睛”; js实现的定时关闭页面或定时提醒效果代码; js 字数统计，区分英汉; js双色时间效果代码; js计算时间过去的时间; 一个javascript参数的小问题; textarea支持图形编辑的实现方法; JavaScript面向对象编程; 动态生成的IFRAME，设置SRC时的，不同位置带来的影响; JObj预览一个JS的框架; 去除有数组中重复的元素; 用JObj实现的渐变效果; 给自定义对象加上自定义事件的支持的教程

No. « ‹ 93 94 95 96 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 209 ::

收藏到网摘: n/a

如何丰富alt属性的显示效果用JavaScript实现字符串切分功能

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

点击运行可以看到效果:

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

如何丰富alt属性的显示效果用JavaScript实现字符串切分功能

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

评论 (0) All

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