高亮显示web页表格行

2010-11-17T06:59:00Z

[关键词]：javascript . css . Web标准 . 浏览器兼容 . DOM . 冒泡事件 . 高亮表格行

[摘要]：本文从简单的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个）里。接下来就是防止异常的一些判断之类的了。最终实现还是由修改元素样式表来完成。

至此整个兼容不同浏览器的高亮表格行的旅行结束了（好长的定语-口-）。很好玩吧~ 文中难免疏漏差错，如果对本文有建议或意见欢迎批评指正~ ^_^

本文链接

tomcat作为windows服务的参数配置，特别是PermSize的设置

2008-05-22T06:53:00Z

当tomcat用startup.bat启动的时候的参数设置网上说的比较多，这里就不再描述。当tomcat作为windows的系统服务的时候，网上找了很多相关的文章，都没有比较全面的参数设置方法，一般就说明了一下xms和xmx的设置，都没有提供其他方面参数的说明，不够实用。经过对apache下的procrun的研究和多次试用，总算清楚了一般参数的设置方法。其实tomcat5.exe本身已经包含有pr...

webwork和spring多配置文件的方法

2005-10-21T09:51:00Z

webwork中只要在xwork.xml中包含其它配置文件即可，如：

spring多配置文件的话，只需要在web.xml文件按照如下定义：

webwork的interceptor来实现ajax功能(buffalo)

2005-10-21T09:31:00Z

已经很久没有来bolg了，现在有空，就把最近写的一个webwork的拦截器放上来给大家参考，如果有bug或有更好的实现办法，可以email给我。下面是interceptor的实现代码：1packageinterceptor;23importjava.io.IOException;45importorg.apache.log4j.Logger;67importcom.caucho.burlap.io...

用C#实现BHO（Brower Helper Object）

2005-07-28T06:02:00Z

在网上找了很长时间，没有发现很好的用C#实现BHO的中文资料。没有办法，只好去找头痛的english资料了。老外还是走在前头，这方面资料还蛮多，下面是我找的两个地址，还没好好看，先放这里。等以后把自己的心得放上来。Build a Managed BHO and Plug into the Browser：http://www.15seconds.com/issue/040331.htmAutoSi...

用Sitemesh控制页面布局

2004-12-18T13:53:00Z

用Sitemesh控制页面布局gagaghost摘要我们在开发Web应用特别是J2EE应用的时候，由于Web页面是由不同的人所开发，所以开发出来的界面通常是千奇百怪，通常让项目管理人员苦笑不得。随着项目的进一步的开发，要求统一的界面风格的紧迫性逐渐浮现了出来。虽说我们可以使用Struts的Ttiles，但Tiles有着它的不足之处。本文介绍了一个基于Web页面...

关于WebWork2中的中文问题

2004-12-13T01:43:00Z

1、视图采用JSPl WebWork2缺省使用的是locale=en_US，encoding=ISO-8859-1l 修改webwork.properties，确保webwork.locale=zh_CN，W...

tomcat中的几点配置说明

2004-11-04T07:09:00Z

1. 如何加大tomcat连接数在tomcat配置文件server.xml中的配置中，和连接数相关的参数有：minProcessors：最小空闲连接线程数，用于提高系统处理性能，默认值为10maxProcessors：最大连接线程数，即：并发处理的最大请求数，默认值为75acceptCount：允许的最大连接数，应大于等于maxProcessors，默...

使用Filter实现静态HTML缓冲(一种折中方法)

2004-11-04T01:09:00Z

缓冲是Web应用中必须考虑的一个提高性能的重要手段。对于基于JSP/Servlet技术的站点，常用的缓冲有持久层的数据库连接池缓冲，内存中的值对象缓冲，JSP页面缓冲，以及各种各样的缓冲框架等等，无不是为了提高系统的吞吐量。然而对于大型站点来说，将JSP页面转换为静态Html也许是最高效的方法，特别适合于数据不经常变化但是页面访问量特别大的站点，如新闻等，通过把JSP动态页面预先转换为静态Html...

关于DirectX中的DirectShow介绍

2004-07-24T09:21:00Z

DirectShow是DirectX大家族中的一位成员。如DirectDraw和Direct3D负责二维图形图像/三维动画加速、DirectMusic和DirectSound负责交互式音乐/环境音效处理一样，DirectShow为Windows平台上处理各种格式的媒体文件播放、音视频采集等高性能要求的多媒体应用，提供了完整的解决方案。事实上，计算机应用领域中的很多模块都可以和DirectShow...

博客园_深夜的心得，与大家分享

高亮显示web页表格行

高亮显示web页表格行

tomcat作为windows服务的参数配置，特别是PermSize的设置

webwork和spring多配置文件的方法

webwork的interceptor来实现ajax功能(buffalo)

用C#实现BHO（Brower Helper Object）

用Sitemesh控制页面布局

关于WebWork2中的中文问题

tomcat中的几点配置说明

使用Filter实现静态HTML缓冲(一种折中方法)

关于DirectX中的DirectShow介绍