搜索
您的当前位置:首页正文

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

2023-12-03 来源:字库网

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

Item Value
项目Item1 值Value1
项目Item2 值Value2
项目Item3 值Value3
项目Item4 值Value4
项目Item5 值Value5
项目Item6 值Value6
然后用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=/s*trHover/g; /*正则表达式过滤trHover类*/ if(o.className.indexOf('trHover')==-1) o.className+=" trHover"; else o.className=o.className.replace(regStr,""); } 这里用到一个小技巧:正则表达式替换。因为你的tr元素可能有其他样式(类)——比如本例的evenRow和oddRow,所以不能简单的在撤销高亮时把对象的className置空。然后就如大家想象的,给tr绑定事件吧: 代码如下: 项目Item1 值Value1 给所有的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加上事件处理。最后表格变成这样: 代码如下:
Item Value
项目Item1 值Value1
项目Item2 值Value2
项目Item3 值Value3
项目Item4 值Value4
项目Item5 值Value5
项目Item6 值Value6
和最初我们写的表格相比,只多了table元素的js事件绑定。接下来就是给我们的hightlightTr函数做个大手术了!这里先把最终的代码贴出来然后一起分析: 代码如下:

上一篇:

下一篇:

热门图文

  • 送周子华南归的作者 送周子华南归的作者是什么]

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻的全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者是什么

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

  • 次韵叶硕夫南归见贻全文

    《次韵叶硕夫南归见贻》李弥逊全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。《次韵叶硕夫南归见贻》全文:未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。作者:李弥逊。年代:宋代。我们为您从以下几个方面提供次韵叶硕夫南归见贻的详细介绍。一、《次韵叶硕夫南归见贻》的全文 点此查看《次韵叶硕夫南归见贻》的详细内容。未挂丹题雁塔中,重来溪上觅筠翁。相期老眼横遥碧,莫着征衫走软红。得失漫嗟蝉翼重,才名合见马群空。三年小度惊人手,未信朱衣也不公。

  • 送周子华南归的作者

    《送周子华南归》陆文圭作者:陆文圭。《送周子华南归》作者:陆文圭。年代:元代。别称:墙东先生。字号:字子方。出生地:江阴(今属江苏)人。出生时间:1252。去世时间:1336。主要作品:《辛卯二月记异》《新移瑞香不得雨有叹》《月·青天一片玉》《挽吉州刘总管》《为刘君符赋乐山诗》等。我们为您从以下几个方面提供送周子华南归的详细介绍。一、《送周子华南归》的全文 点此查看《送周子华南归》的详细内容。此日与君别,重逢未有期。衰年行欲尽,近事或难知。浩荡风云会,萧条草木悲。三吴多俊杰,试与问安危。二、《送周子华南归》陆文圭其他诗词《赤壁图·公瑾子瞻二龙》、《题戴嵩牛图》、《雅宜山在城西五十里有德庵在其下穹寄山福寺》、《送仲华葛兄·蓉城诸葛何绵绵》、《送徐舜辑·彦霖父子魏公客》。相同朝代的诗歌;

Top