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

 更新时间:2010年11月19日 19:40:23   作者:   我要评论
本文从简单的css高亮显示表格的某一行说开去,探讨了在不同浏览器下对于高亮功能的兼容性。阐述针对表格本身绑定javascript事件实现这一功能的方法。
本篇作为开发学习笔记之一。
[文]
在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个)里。接下来就是防止异常的一些判断之类的了。最终实现还是由修改元素样式表来完成。
至此整个兼容不同浏览器的高亮表格行的旅行结束了(好长的定语-口-)。很好玩吧~ 文中难免疏漏差错,如果对本文有建议或意见欢迎批评指正~ ^_^

相关文章

  • 微信小程序实现动态获取元素宽高的方法分析

    微信小程序实现动态获取元素宽高的方法分析

    这篇文章主要介绍了微信小程序实现动态获取元素宽高的方法,结合实例形式分析了微信小程序动态获取、设置元素宽高的相关操作技巧与注意事项,需要的朋友可以参考下
    2018-12-12
  • 一个php+js实时显示时间问题

    一个php+js实时显示时间问题

    本文给大家分享的是解决的php+js实时显示时间问题,主要是自己当时的理解有问题,也许大家有和我一样的情况,这里分享给大家
    2015-10-10
  • JS实现一个按钮的方法

    JS实现一个按钮的方法

    这篇文章主要介绍了JS实现一个按钮的方法,实例分析了使用js实现一个按钮的功能与相关技巧,需要的朋友可以参考下
    2015-02-02
  • 整理关于Bootstrap排版的慕课笔记

    整理关于Bootstrap排版的慕课笔记

    这篇文章主要为大家整理了关于Bootstrap排版的慕课笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 浅谈js的html元素的父节点,子节点

    浅谈js的html元素的父节点,子节点

    下面小编就为大家带来一篇浅谈js的html元素的父节点,子节点。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • JS获取url参数,JS发送json格式的POST请求方法

    JS获取url参数,JS发送json格式的POST请求方法

    下面小编就为大家分享一篇JS获取url参数,JS发送json格式的POST请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • ionic中的$ionicPlatform.ready事件中的通用设置

    ionic中的$ionicPlatform.ready事件中的通用设置

    $ionicPlatform.ready事件是用于检测当前的平台是否就绪的事件,相当于基于document的deviceready事件, 在app中一些通用关于设备的设置必须在这个事件中处理
    2017-06-06
  • javascript定义变量时带var与不带var的区别分析

    javascript定义变量时带var与不带var的区别分析

    这篇文章主要介绍了javascript定义变量时带var与不带var的区别,以一个简单实例分析了变量定义时带var与不带var的执行原理及用法区别,需要的朋友可以参考下
    2015-01-01
  • 解决layui轮播图有数据不显示的情况

    解决layui轮播图有数据不显示的情况

    今天小编就为大家分享一篇解决layui轮播图有数据不显示的情况,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • H5实现中奖记录逐行滚动切换效果

    H5实现中奖记录逐行滚动切换效果

    这篇文章主要为大家详细介绍了H5实现中奖记录逐行滚动切换效果,利用定时器实现中奖记录逐行展示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论