高亮显示web页表格行的javascript代码


Posted in Javascript onNovember 19, 2010

本篇作为开发学习笔记之一。
[文]
在web开发中经常遇到需要加亮鼠标指向的表格行的情况。首先说说一般的情况。
·简单尝试
CSS2中允许我们对HTML元素使用hover伪类,这极大的方便了对于表格的样式的控制。
我们从一个小例子开始:
XHTML(只列出了表格部分,请自行补完页面,本例在Transational的DTD下通过):

<table class="datatable" cellspacing="0"> 
<thead> 
<tr> 
<th>Item</th> 
<th>Value</th> 
</tr> 
</thead> 
<tbody> 
<tr class="oddRow"> 
<td>项目Item1</td> 
<td>值Value1</td> 
</tr> 
<tr class="evenRow"> 
<td>项目Item2</td> 
<td>值Value2</td> 
</tr> 
<tr class="oddRow"> 
<td>项目Item3</td> 
<td>值Value3</td> 
</tr> 
<tr class="evenRow"> 
<td>项目Item4</td> 
<td>值Value4</td> 
</tr> 
<tr class="oddRow"> 
<td>项目Item5</td> 
<td>值Value5</td> 
</tr> 
<tr class="evenRow"> 
<td>项目Item6</td> 
<td>值Value6</td> 
</tr> 
</tbody> 
</table>

然后用CSS定义了表格的样式:
.datatable{ 
margin:15px auto; 
width:500px; /*这两行可以根据需要修改,仅为示例*/ 
} 
.datatable,.datatable tr,.datatable td,.datatable th,.datatable .tableheader td{ 
border:1px #0073ac solid; 
border-collapse:collapse; 
padding:3px; 
} 
.datatable .tableheader td,.datatable th{ 
font-weight:bold; 
background:#fff url(images/thead.png) repeat-x; 
padding:8px 5px; 
} 
.datatable tr:hover{ 
background-color:#cfe9f7; 
}

对于css的部分,不做过多解释。请注意最后加粗的部分,对tr元素应用了伪类hover的样式。这在对CSS2支持的浏览器下(IE7+,FF,Opera,Safari等)运作的十分完美。然而CSS1仅提供对于锚元素a的伪类支持,遗憾的是IE6仍然只支持CSS1的伪类。于是我们要进行修改,提供对于IE6的支持。
首先增加一个样式:
.datatable .trHover,.datatable tr:hover{ 
background-color:#cfe9f7; 
}

此处增加了一个trHover的类,用以修正IE6下的显示。接下来就是书写javascript了。最初的想法非常简单,你不是要鼠标指向时高亮当前行么?于是就对每一行应用javascipt呗。首先写一个javascript的函数。为了统一我把加亮和撤销加亮合并到一个函数中了,这样就可以简化函数调用,对tr的mouseover和mouseout事件绑定一个函数就行了。
function highlightTr(o){ 
var regStr=/\b\s*trHover\b/g; /*正则表达式过滤trHover类*/ 
if(o.className.indexOf('trHover')==-1) 
o.className+=" trHover"; 
else 
o.className=o.className.replace(regStr,""); 
}

这里用到一个小技巧:正则表达式替换。因为你的tr元素可能有其他样式(类)——比如本例的evenRow和oddRow,所以不能简单的在撤销高亮时把对象的className置空。然后就如大家想象的,给tr绑定事件吧:
<tr class="oddRow" onmouseover="highlightTr();" onmouseout="hightlightTr();"> 
<td>项目Item1</td> 
<td>值Value1</td> 
</tr>

给所有的tr写上事件绑定就可以了。然而这样做也有问题:1、增加了页面的代码量。2、如果表格是由后台服务端程序输出的,有时不允许你给tr元素绑定javascript函数。怎么办?直接的想,可以用js在页面某范围里搜索该样式的表格,然后绑定tr的事件。不过我们今天换个思路,直接对table元素绑定js事件,实现对某一行的高亮!
这种想法是有根据的。这不得不说说浏览器的事件模型。由于历史原因,各种浏览器在实现javascript事件响应上有差异,然而基本思路还是一致的。js事件在W3C DOM中被描述成捕获-冒泡模型。简单的说有点像下饺子,饺子逐渐沉到锅底,接受了热传递,慢慢漂到上面。回到模型本身,javascript事件有两大类,首先从最外层的元素捕获事件,逐渐向内传递到触发事件的元素——这叫事件捕获,然后再逐渐向外扩展到外层元素——这叫做事件冒泡。IE的实现不支持捕获类型的事件,对冒泡型事件的实现与W3C DOM标准也略有区别,但总体思路是一样的。
说了半天,我们这次就是想用事件的冒泡处理机制来达到高亮表格行的目的。
再次重申,冒泡事件是从触发javascript事件的最内层元素扩散到外层的,就像石子激起的涟漪一样。鼠标滑过某一行,首先最内层元素比如td里的文本或者其他元素触发mouseover,接下来传到td-->tr-->tbody-->table依次响应mouseover事件,鼠标移出时,也有这种依次冒泡的过程。这就是我们这样处理事件响应程序的根据。
首先,我们需要修改XHMTL中的事件绑定代码。去掉tr元素中mouseover和mouseout的事件处理,随后给table加上事件处理。最后表格变成这样:
<table class="datatable" cellspacing="0" onmouseover="highlightTr();" onmouseout="highlightTr();"> 
<thead> 
<tr> 
<th>Item</th> 
<th>Value</th> 
</tr> 
</thead> 
<tbody> 
<tr class="oddRow"> 
<td>项目Item1</td> 
<td>值Value1</td> 
</tr> 
<tr class="evenRow"> 
<td>项目Item2</td> 
<td>值Value2</td> 
</tr> 
<tr class="oddRow"> 
<td>项目Item3</td> 
<td>值Value3</td> 
</tr> 
<tr class="evenRow"> 
<td>项目Item4</td> 
<td>值Value4</td> 
</tr> 
<tr class="oddRow"> 
<td>项目Item5</td> 
<td>值Value5</td> 
</tr> 
<tr class="evenRow"> 
<td>项目Item6</td> 
<td>值Value6</td> 
</tr> 
</tbody> 
</table>

和最初我们写的表格相比,只多了table元素的js事件绑定。接下来就是给我们的hightlightTr函数做个大手术了!这里先把最终的代码贴出来然后一起分析:
<script type="text/javascript"> 
//<!-[CDATA[ 
//该函数修正IE6不能识别TR元素hover伪类的bug 
function highlightTr(){ 
var theEvent=window.event||arguments.callee.caller.arguments[0]; 
var srcElement = theEvent.srcElement; 
if (!srcElement) 
{ 
srcElement = theEvent.target; 
} 
if(!srcElement.parentNode) return false; 
var o=srcElement.parentNode; 
while(o.parentNode&&o.tagName!="TR") 
{ 
if(o.tagName=="TABLE") break; 
else o=o.parentNode; 
} 
var regStr=/\b\s*trHover\b/g; 
if(o.className.indexOf('trHover')==-1) 
o.className+=" trHover"; 
else 
o.className=o.className.replace(regStr,""); 
} 
//]]> 
</script>

修改后的hightlighTr的版本的思路是这样的:1、处理事件,获得触发javascript事件的页面元素。2、寻找它的父节点,直到找到tr。3、进行样式处理。
值得说的就是获得触发事件元素的部分考虑了浏览器兼容性。IE的事件模型里window对象有一个event属性,而W3C DOM标准event对象必须作为唯一参数传给事件处理函数,于是它便存在于函数的一个隐藏的参数(在参数列表第0个)里。接下来就是防止异常的一些判断之类的了。最终实现还是由修改元素样式表来完成。
至此整个兼容不同浏览器的高亮表格行的旅行结束了(好长的定语-口-)。很好玩吧~ 文中难免疏漏差错,如果对本文有建议或意见欢迎批评指正~ ^_^
Javascript 相关文章推荐
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
Javascript中replace()小结
Sep 30 Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
JS从非数组对象转数组的方法小结
Mar 26 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
JS实现小星星特效
Dec 24 Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 Javascript
Javascript中window.name属性详解
Nov 19 Javascript
javascript tips提示框组件实现代码
Nov 19 #Javascript
突发奇想的一个jquery插件
Nov 19 #Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
Nov 19 #Javascript
基于jQuery的获得各种控件Value的方法
Nov 19 #Javascript
基于jquery实现的可以编辑选择的下拉框的代码
Nov 19 #Javascript
使用jQuery的将桌面应用程序引入浏览器
Nov 19 #Javascript
DIV菜单层实现代码
Nov 19 #Javascript
You might like
PHP隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
javascript中对对层的控制
2006/12/29 Javascript
关于jquery动态增减控件的一些想法和小插件
2010/08/01 Javascript
javascript删除一个html元素节点的方法
2014/12/20 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
TinyMCE汉化及本地上传图片功能实例详解
2016/05/31 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
ES6的异步终极解决方案分享
2019/07/11 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python中datetime模块参考手册
2017/01/13 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python中的RSA加密与解密实例解析
2019/11/18 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
Python 多进程原理及实现
2020/12/21 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
责任担保书范文
2014/05/21 职场文书
烹饪大赛策划方案
2014/05/26 职场文书
上帝也疯狂观后感
2015/06/09 职场文书
2019年思想汇报
2019/06/20 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书
Python matplotlib绘制雷达图
2022/04/13 Python
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server