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

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

Javascript: JavaScript中数组方法; JS的&&和&，||和|运算符两个不同点; 一个例子认识JS的两个参数; 练习:鼠标感应伸缩隐藏层; Javascript让媒体通过指定的按钮播放; 已知商品单价,用JS计算所选数量的总价; 用js实现select对div的隐藏与显示; JavaScript教程:onmouseover控制图片; 网页设计中总结的几个有用的JS特效代码; Javascript代码在网页中简单应用的几个示例; 实现在AJAX下的前进、后退功能; Javascript代码轻松隐藏网页源文件; Javascript实现打印网页中定义的部分内容; JS分层的概念与本地存贮; 基于javascript的拼音字典及应用举例; JavaScript入门学习书籍的阶段选择; JS和CSS实现的气泡窗口; Javascript教程:实用的JS函数库; 符合web标准的网页中调用Flash的方法; JS最常用的55个经典技巧

No. « ‹ 161 162 163 164 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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 中的鼠标移动到某个单元格上后，整个列都变色的实现方法