高亮显示web页表格行的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个)里。接下来就是防止异常的一些判断之类的了。最终实现还是由修改元素样式表来完成。
至此整个兼容不同浏览器的高亮表格行的旅行结束了(好长的定语-口-)。很好玩吧~ 文中难免疏漏差错,如果对本文有建议或意见欢迎批评指正~ ^_^

(0)

相关推荐

  • 2014最热门的JavaScript代码高亮插件推荐

    对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

  • 两种简单实现菜单高亮显示的JS类代码

    记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式. 第一种判断当前URL值高亮类代码: 复制代码 代码如下:

  • jQuery语法高亮插件支持各种程序源代码语法着色加亮

    1) highlightjs Highlight.js能够对页面中的各种程序源代码语法着色加亮.支持的语言包括: •Python •Ruby •Perl •PHP •XML •HTML •CSS •Django •Javascript •VBScript •Delphi •Java •C++ •RenderMan (RSL and RIB) •SQL •SmallTalk •Axapta •1C •Ini •Diff •DOS .bat •Bash 2) google-code-prettify

  • javascript网页关键字高亮代码

    //高亮网页关键字的javascript代码 var keys = [ ["脚本",http://www.jb51.net,"#ff0000"], ["小说",http://www.kanshule.com,"#00ff00"], ["念经","http://www.baidu.com","#0000ff"], ["工会","http:/

  • 分享15个美化代码的代码语法高亮工具

    本文作者是Gavin McLeod,一个被困在<电子世界争霸战>里的骨灰级Web极客.在文中列举了15个帮助开发者快速编码.优化代码的语法高亮工具,每个高亮工具都有其功能特色.(以下是编译内容) 开发者和顽固的代码极客深知Code Syntax Highlighter(以下简称"代码语法高亮工具")作为二级符号的一种形式,便于在一个结构化语言或标记语言里书写代码.有些代码高亮编辑器里融合了多个语法高亮功能,例如拼写检查.代码折叠.语法高亮工具可以在总体策略的使用上起到较大的

  • 用JS将搜索的关键字高亮显示实现代码

    用JS让文章内容指定的关键字加亮 是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助 复制代码 代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

  • 2016年最热门的15 款代码语法高亮工具,美化你的代码

    前言: 代码高亮很有用,特别是在需要在网站或者blog中显示自己编写的代码的时候,或者给其他人查看或调试语法错误的时候.我们可以将代码高亮,以便阅读者可以十分方便的读取代码块,增加用户阅读代码的良好体验. 语法高亮是文本编辑器用来显示文本的,特别是源代码,根据不同的类别来用不同的颜色和字体显示.这个功能有助于编写结构化的语言,比如编程语言,标记语言,这些语言的语法错误显示是有区别的.语法高亮并不会影响文本自身的意义,而且能很好的符合人们的阅读习惯. 目前,有很多免费而且有用的代码高亮脚本.这些脚

  • 用js查找法实现当前栏目的高亮显示的代码

    当前栏目高亮显示        JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回 其它,并与返回其它结果的那个字符串所在元素定义一个class. HTML 复制代码 代码如下: <div id="nav">   <ul>   <li><a href="http://www.jb51.net/html/list/index_127.htm" 

  • Javascript实现的CSS代码高亮显示

    相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.

  • JavaScript版代码高亮

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript版代码高亮</title><link href=&

  • javascript 关键字高亮显示实现代码

    关键字高亮显示 我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET

  • ASP语法高亮类代码

    此类高亮根据Editplus高亮来做的 复制代码 代码如下: Class Wyd_AspCodeHighLight  Private RegEx  Public Keyword,ObjectCommand,Strings,VBCode  Public KeyWordColor,ObjectCommandColor,StringsColor,Comment,CodeColor    Private Sub Class_Initialize()      Set RegEx = New RegExp

  • js兼容IE6,IE7菜单高亮显示效果代码

    兼容IE6,IE7菜单高亮显示 *{ font:12px tahoma; } #menu li{ list-style:none; width:88px; height:30px; float:left; background:#EFF1F5; text-align:center; margin:0; overflow:hidden; } #menu li a{ display:block; } #menu li a:link,#menu li a:visited{ text-decoratio

  • 高效的表格行背景隔行变色及选定高亮的JS代码

    这段JS放在head中 复制代码 代码如下: //点击当前选中行的时候设置当前行的颜色,同时恢复除当前行外的行的颜色及鼠标事件 function selectRow(target) { var sTable = document.getElementById("ServiceListTable") for(var i=1;i<sTable.rows.length;i++) //遍历除第一行外的所有行 { if (sTable.rows[i] != target) //判断是否当前

  • 如何实现正则表达式的JavaScript的代码高亮

    今天想改一下JS的高亮的配色,憋了一下午憋出了这个这个正则表达式. 下面这老长老长了的玩意儿是个正则表达式,看到了别吓坏了. 复制代码 代码如下: /(\/\/.*|\/\*[\S\s]+?\*\/)|((["'])(?:\\.|[^\\\n])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|in

  • fckeditor 代码语法高亮

    先是IE: 1.遗留的问题:隐藏的源码和格式化后的代码有会有问题. 经上次研究的结果,两处的代码有可能不对,主要是HTML的特别代码,像代码里有标签<div>,JavaScript代码里有&alt等.这里的解决方法很简单:只要替换一下就可以了,不过要注意,在进行格式化之前就进行替换.因为隐藏的代码也是要替换的,最后取的时候也要替换回去,但是要反顺序.代码如下: 复制代码 代码如下: .replace(/&/g, "&") .replace(/<

  • tinyMCE插件开发之插入html,php,sql,js代码 并代码高亮显示

    下面就是我开发的过程. 首先,我的 tinyMCE版本是 Version: 3.2.7 (2009-09-22) .下载地址 http://www.jb51.net/codes/17198.htmltinyMCE插入代码,需要调用 tinyMCE的 tinyMCE.execCommand('mceInsertContent',false,value); 方法.其中参数无需改变,value 就是你要插入的内容, 比如我写了一个函数, 复制代码 代码如下: function InsertHTML(v

随机推荐