2012/10/30 15:45:24作者:佚名来源:网络
【实例名称】
JS代码实现表格选中后变色
【实例描述】
在用户浏览表格时,为了突出显示表格内容,表格颜色会在鼠标移动到表格时发生变化本例介绍如何使表格的颜色发生变化。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页-学无忧(www.xue51.com)</title> <script language="javascript"> var searchResult=new Array();//鼠标滑过时显示背景色 //改变背景色和边框颜色的方法 function colorChange(table,color,color2) { table.style.borderColor=color; table.style.backgroundColor=color2; } //鼠标移动过来后,更改颜色 function colorChange_on(e) { if (document.all) source1=event.srcElement else if (document.getElementById) source1=e.target; if (source1.id=="mytable"){ colorChange(source1,"#999999","#F8F8F6"); } else{ while(source1.tagName!="TABLE") { source1=document.getElementById? source1.parentNode : source1.parentElement; if (source1.id=="mytable") colorChange(source1,"#999999","#F8F8F6"); } } } //鼠标移走后,将颜色设置为白色 function colorChange_off(e) { if (document.all) source2=event.srcElement else if (document.getElementById) source2=e.target if (source2.id=="mytable") colorChange(source2,"white","white") else{ while(source2.tagName!="TABLE") { source2=document.getElementById? source2.parentNode : source2.parentElement if (source2.id=="mytable") colorChange(source2,"white","white") } } } </script>
需要在body中添加表格,并调用上面的方法,代码如下所示:
</head> <body> <table width="80%" border="0" onMouseOver="colorChange_on(event)" onMouseOut="colorChange_off(event)" id="mytable" > <TR> <TD>鼠标移动</TD> <TD>鼠标移动</TD> </TR> <TR> <TD>鼠标移动</TD> <TD>鼠标移动</TD> </TR> <TR> <TD>鼠标移动</TD> <TD>鼠标移动</TD> </TR> <TR> <TD>鼠标移动</TD> <TD>鼠标移动</TD> </TR> </table> </body> </html>
【运行效果】
【难点剖析】
本例中如果要在JavaScriot中获取表格.必须为表格指定“id”或“name”属性。获取鼠标所指元素是使用“evenLsrcElement”,获取元素后由其“id”判断它是否为指定的表格,如果是,则使用“style”属性修改元素的边框颜色和背景颜色。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:表格选中后变色 进行本实例源码下载
标签: JS代码 表格 变色
相关文章
够快云库v6.3.24.12120免费版
详情光影魔术手官方版 v4.7.1
详情ADsafe净网大师v5.4.408.7000
详情网易邮箱大师v5.3.2.1015电脑版
详情foxmailv7.2.25.375
详情暴风影音5v5.92.0824.1111
详情暴风影音v5.92.0824.1111
详情BitComet(比特彗星)v2.13.4.13Beta2
详情路由优化大师v4.5.31.267
详情茄子快传电脑版 v5.1.0.7
详情搜狐影音 v7.2.1.0官方版
详情搜狐影音客户端 v7.2.1.0
详情迅雷影音官方版 v7.0.3.92
详情cbox央视影音v6.0.3.4经典版
详情potplayer播放器v1.7.22496
详情Daum PotPlayer(已集成直播源)v1.7.22496绿色纯净美化便携增强版
详情天国拯救2黄金版 Build.17149332-1.1.1.11377中文版
详情燕云十六声电脑版 v1.9.31
详情潜行者2:切尔诺贝利之心 Build.16805297豪华中文版
详情模拟农场25豪华中文版
详情迷你世界电脑版 v1.41.00
详情骑马与砍杀2 v1.2.9.34019免费版
详情侠盗猎车手圣安地列斯 v1.0最新中文版
详情整蛊白云 v1.0
详情地平线4 v1.476中文版
详情圣女战旗中文v1.1.9绿色免安装版
详情狂怒2中文
详情红色警戒2共和国之辉电脑版 v1.0
详情模拟人生4 v1.0中文免费版
详情蛊婆v1.0免费版
详情风起云涌2越南中文版 v1.6Steam正版
详情使命召唤17官方中文版 v1.0
详情松鼠记账v6.8.1安卓版
详情掌门好家长v5.10.0手机版
详情惠买v5.4.46官方版
详情快快查汉语字典综合官方版V5.0.0官方版
详情尚德机构v7.8.1官方版
详情头像精灵v3.7.0美化版
详情运满满货主版v7.92.1.0安卓版
详情运满满司机版app手机版v8.92.1.0安卓版
详情网易蜗牛读书水墨版V1.9.78
详情泼辣修图免费版v6.11.3安卓版
详情泼辣修图安卓版v6.11.3
详情汽车大师v7.15.5技师版
详情步多多v2.8.1安卓版
详情新浪新闻v8.43.7官方版
详情拓词v14.21安卓版
详情思尔健康v3.1.42安卓版
详情