首页 > 代码库 > 10.3 鼠标指针经过时整行变色提示的表格

10.3 鼠标指针经过时整行变色提示的表格

2024-07-08 21:20:57   220人阅读

近年来，Web 2.0的概念逐渐被广泛接受，其中很重要的一点是强调改善用户体验，例如上一节的例子中，把表格设置为交替背景色，可以使访问者在浏览表格时有更好的体验。

然而对于长时间审核大量数据和浏览表格的用户来说，即使是隔行变色的表格，长时间阅读这样的表格仍然会感到疲劳。而且对于数据壁很大的表格，特别容易看错行或者列。如果参考微软公司Excel软件的做法，我们就可以发现很多可以改进的地方。

例如，在一个行列都很多的表格中，如果能像在Excel中那样，随时以高亮的方式提示一个单元格对应的行号（或行的名称1）和列号（或列的名称），就会大大改进浏览者的体验了。

在本节的案例中先实现一个比较容易的效果，当鼠标指针经过表中的某一个单元格时，该单元格所在的行能够动态地变色，如图1所示，这样就会大大减少访问者看错行的可能性。这实现起来比横竖两个方向的变色要容易一些。

实例文件位于网页学习网CSS教程资源中的“第10章\02\pretty-2.htm”。

图1 鼠标指针经过时数据行的背景变色
图1 鼠标指针经过时数据行的背景变色

一、搭建HTML结构

仍然以上一节中制作的表格为例，由于本案例的重点是JavaScript的编写，因此先对表格进行化简，把表格设置为最基本的HTML结构，这样便于理解JavaScript的作用原理。把表头的标记全部换为通用的<td>标记，HTML代码如下。lodidance.com

折叠XML/HTML 代码复制内容到剪贴板
  1. <table summary="book list">  
  2.     <caption>Book List</caption>  
  3.         <tr >  
  4.             <td >Title</td>  
  5.             <td>ID</td>  
  6.             <td>Contry</td>  
  7.             <td>Price</td>  
  8.             <td>Download</td>  
  9.         </tr>  
  10.   
  11.         <tr >  
  12.             <td >Tom</td>  
  13.             <td>1213456</td>  
  14.   
  15.             <td>Germany</td>  
  16.             <td>$3.12</td>  
  17.             <td>Download</td>  
  18.         </tr>  
  19.         <tr>  
  20.             <td >Chance</td>  
  21.             <td>1213457</td>  
  22.   
  23.             <td>Germany</td>  
  24.             <td>$123.34</td>  
  25.             <td>Download</td>  
  26.         </tr>  
  27.         <tr >  
  28.             <td >John</td>  
  29.             <td>1213458</td>  
  30.   
  31.             <td>Germany</td>  
  32.             <td>$34.37</td>  
  33.             <td>Download</td>  
  34.         </tr>  
  35.         <tr>  
  36.             <td>oKathleen</td>  
  37.             <td>1213459</td>  
  38.             <td>Germany</td>  
  39.             <td>$23.67</td>  
  40.             <td>Download</td>  
  41.         </tr>  
  42. </table>  

然后把相应的CSS设置也化简，只保留对table和td的基本设置，代码如下。

折叠CSS 代码复制内容到剪贴板
  1. table {   
  2.     color: #565;   
  3.     font: 12px arial;   
  4. }   
  5. td {   
  6.     background-color:#DFC;   
  7.     border-bottom: 2px solid #B3DE94;   
  8.     border-top: 3px solid #FFFFFF;   
  9.     padding: 9px;   
  10. }

二、在Firefox和IE 8中实现鼠标指针经过时整行变色

下面使鼠标指针经过某一行的时候，该行的背景变色。对于Firefox浏览器而言，仅仅通过CSS的“:hover”伪类便可以实现该效果，添加如下代码：

折叠CSS 代码复制内容到剪贴板
  1. tr:hover{   
  2.     background-color: #595;   
  3.     color:#fff;   
  4. }

这段设置的意图是，某一行在鼠标指针经过时，会使用“tr:hover”设置的背景色(#595)和文字颜色（#fff，白色）。然而，在Firefox中的效果只有文字颜色变化，背景色没有变化。这是什么原因呢？lodidance.com

原因在于前面的样式设置中，背景色是在td中设置的，这里tr的:hove伪类的优先级低于td，因此背景色还是按照td的设置，将背景色的设置从td中移出来，井增加到tr中，效果就会正常了。

这个方法在Fire fox和IE 7/8中都是有效的。IE 6浏览器不支持<tr>标记的“:hover”伪类别，因此下一小节介绍如何采用JavaScript动态的配合，实现同样的效果。

三、在IE 6中实现鼠标指针经过时整行变色

① 首先，在上面的CSS设置中增加一个“.hover”类选择器。

折叠CSS 代码复制内容到剪贴板
  1. tr:hover,   
  2. tr.hover{   
  3.     background-color: #595;   
  4.     color:#fff;   
  5. }

在</table>和</body>之间，增加JavaScript语句，代码如下。

折叠JavaScript 代码复制内容到剪贴板
  1. <script language="javascript">   
  2. var rows = document.getElementsByTagName(‘tr‘);   
  3. for (var i=0;i<rows.length;i++){   
  4.     rows[i].onmouseover = function(){       //鼠标指针在行上面的时候   
  5.         this.className = ‘hover‘;   
  6.     }   
  7.     rows[i].onmouseout = function(){        //鼠标指针离开时   
  8.         this.className = ‘‘;   
  9.     }   
  10. }   
  11. </script>

分析 documenm.getElementsByTagN-me(‘tr‘)”的作用是取得一个数组，数组中的每个元素就是DOM中的各个tr节点，这个数组存储在“rows”变量中。

然后用一个循环结构，对每一个tr节点的onmouseover件增加处理函数，这个函数将会在该tr被鼠标指针经过的时候执行，这个函数的内容是：

折叠JavaScript 代码复制内容到剪贴板
  1. this.className = ‘hover‘;

这里的this就是代表该节点本身，因此该语句的含义是，使得该节点的CSS类名为hover。这个类别前面在CSS部分已经设置了，因此就实现了鼠标指针经过时，背景色发生改变。

接下来就要使鼠标指针离开的时候，恢复原来的背景色．这需要为onmouseover事件（也就是鼠标指针离开）增加处理函数，内容是使类别名为空字符串，即清除了前面设置的“hover”，这样就恢复原来的背景色了。

点击下载第8~17章CSS教程资源 返回《CSS教程布局之道》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/css/jc/735.html


联系
我们