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

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

Javascript: 屏蔽Flash右键信息的js代码; JavaScript QueryString解析类代码; JavaScript写的一个自定义弹出式对话框代码; js限制输入框可输入字节数代码; JS与框架页的操作代码; jQuery+CSS 实现的超Sexy下拉菜单; 使用IE6看老赵的博客 jQuery初探; jQuery UI.Layout Plug-in做框架; jQuery框架实例代码分析; JS通用代码:Tab选项卡通用js代码; JavaScript脚本的void(0)究竟是何含义; 9个优秀的JavaScript实现的评级投票插件教程; jQuery最出色的是 API 设计; jquery团队发布jquery 1.4; jQuery 1.4：15个新特性和优化增强; jQuery插件分享:Flash/MP3/Video多媒体插件; jQuery 1.4官方文档详细讲述新特性功能; 网页每次加载调用不同CSS样式表; JQuery知识:20个jQuery教程+11个jQuery插件; 制作Web电子表格的jQuery插件：jQuery.sheet

No. « ‹ 278 279 280 281 › »

技术文章搜索

关键字

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

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

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