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

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

Javascript: 用jquery ajax获取网站Alexa排名的代码; jQuery Selectors(选择器)的使用(九、表单对象属性篇); javascript 数组使用方法汇总; 用于CSS代码压缩与格式化的javascript函数代码; ExtJS下grid的一些属性说明; javascript 强制刷新页面的实现代码; js 加载并解析XML字符串的代码; jquery提示 "object expected"的解决方法; 页面中iframe相互传值传参; jQuery 行背景颜色的交替显示(隔行变色)实现代码; 魔方在线秒表javascript版; JavaScript 字符串与数组转换函数[不用split与join]; javascript与asp.net(c#)互相调用方法; javascript下搜索子字符串的的实现代码(脚本之家修正版); JQuery下关于$.Ready()的分析; input 日期选择功能的javascript代码; js 页面传参数时参数值含特殊字符的问题; 读取table内容的javascript代码; 最简单的javascript对象实例代码; JQuery Tips(2) 关于$()包装集你不知道的

No. « ‹ 248 249 250 251 › »

技术文章搜索

关键字

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

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

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