10.4 Excel方式二维变色提示的表格

在10.3节中，整行变色提求鼠标指针经过的效果已经完成了，接下来继续改进它。实现类似于Excel的行列的二维提示，效果如图1所示，当鼠标指针经过某一个单元格时。相应的列头和行头单元格会同时变色。

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

bubuko.com,布布扣
图1 表格的行列二维变色提示

注意：本案例需要不少JavaScript编程的配合，如果读者缺乏相应基础，学起来可能会有一点困难。

一、改造CSS代码

首先改造CSS设置，这个效果单纯使用CSS是无法实现的，必须要使用javaScript来实现，因此“tr:hover”选择器就可以删除了。

还应该将“tr.hover”改成“td.hover”，因为我们的目标是使鼠标指针经过的单元格，以及该单元格所在的行和列的第1个单元格的背景变色，而不是整行变色。把变色的对象设置为单元格，将下面的代码：lodidance.com

折叠CSS 代码复制内容到剪贴板

tr:hover,
tr.hover{
background-color: #595;
color:#fff;
}

改为：

折叠CSS 代码复制内容到剪贴板

td.hover{
background-color: #595;
color:#fff;
}

二、改造JavaScript代码

接下来改造JavaScript代码。首先将下面这行代码中的“tr”修改为“td”，也就是从DOM树中提取出所有的td节点。

折叠JavaScript 代码复制内容到剪贴板

var rows = document.getElementsByTagName(‘td‘);

这时效果可以想象出来，就是当鼠标指针经过某个单元格时，该单元格变色。

注意：为了养成良好的习惯，变量名称应该符合它的实际含义，因此将原来的rows变量改名为cells，row的中文意思是行，cell的中文意思是单元格。

如何使所在行和列的第1个单元格也变色呢？如果能够知道当前鼠标指针经过的行和列的编号（或者叫“坐标”）．就可以计算出相应两个单元格的编号。在cells数组中存放着所有的单元格，因此可以尝试如下的代码：

折叠JavaScript 代码复制内容到剪贴板

var cells = document.getElementsByTagName(‘td‘);
for (var i=0;i<cells.length;i++){
cells[i].onmouseover = function(){ //鼠标指针在行上面的时候
cells[i].className = ‘hover‘;
}
cells[i].onmouseout = function(){ //鼠标指针离开时
this.className = ‘‘;
}
}

在这段代码中，我们仅把第4行中的“this”换成了“cells[i]”。前面说过，“this”就代表该节点本身，这里直接用效组元素来表示，那么由该元素的编号就可以推算出其他元素的编号了。经过试验会发现，这样替换以后，鼠标指针经过时就不会有变色的效果了。

分析：这个问题出在哪里了呢？这需要对这段程序深入地理解。请读者思考，这段程序是在什么时候运行的？是在鼠标指针经过时，还是在页面装载时？

正确答案是后者，而且这段代码只执行一次。这样就拽到原因了，当鼠标指针最过莱单元格时，所运行的仅是修改className这一个操作，而此时代码中的循环早已结束，因此i变量的值应该等于所有单元格的总数，例如这里一共25个单元格，i应该等于25，而JavaScript中数组的元素编号从0开始，最后一个单元格的编号是24，cell[25]根本就不在，因此没有单元格变色就不奇怪了。

为了验证上面的分析，现在把第4行代码：

折叠JavaScript 代码复制内容到剪贴板

cells[i].className = ‘hover‘;

改为：

折叠JavaScript 代码复制内容到剪贴板

cells[i-1].className = ‘hover‘;

请读者猜一猜运行的结果是什么？答案是，无论鼠标指针进入哪个单元格，表格最右下角的一个单元格都会变色，这就证明了i-1恰好等于24。

有了上面的基础．我们就找到r解决的方法。修改完成后的JavaScript代码如下。

折叠JavaScript 代码复制内容到剪贴板

var cells = document.getElementsByTagName(‘td‘);
for (var i=0;i<cells.length;i++){
cells[i].onmouseover = function(){ //鼠标指针在行上面的时候
this.className = ‘hover‘;
for (var j=0;j<cells.length;j++)
if(cells[j]==this){
cells[j%5].className =‘hover‘;
cells[j-j%5].className =‘hover‘;
}
}
cells[i].onmouseout = function(){ //鼠标指针离开时
this.className = ‘‘;
for (var j=0;j<cells.length;j++)
if(cells[j]==this){
cells[j%5].className =‘‘;
cells[j-j%5].className =‘‘;
}
}
}

代码中，在鼠标指针进入部分增加了5行代码（第6—1O行）。其运行过程是首先要获得当前单元格的编号，方法是在cells数组中，从O号元素开始查找。如果某个元素等于“this”，它就是当前鼠标指针经过的单元格，此时循环变量记录的就是它的编号。“j % 5”的含义是取得对j除以5后的余数，也就是该列的第一个单元格编号，同理“j - j % 5”就是该行第一个单元格的编号。接下来就都是前面介绍过的内容了。

这时在浏览器中可以看到正确的效果，如图1所示。lodidance.com

本实例巧妙地采用JavaScript读取鼠标指针的状态，从而改变相应的3个单元格的CSS属性，来实现背景颜色的动态变化，

当然，这个例子还很简单。例如本案例为了简化，把所有单元格都用td来定义。如果保留th等标记，本例就需要进行一定的修改了。如果读者有兴趣，可以进一步深入学习JavaScript和DOM编程，这些效果都是可以实现的。利用JavaScript和DOM，可以完全使用编程的方式动态地产生和改变页面中的所有元素，因此任何能用HTML和CSS产生的内容，用编程的方式都能做到。

注意：使用JavaScript以后，或多或少稚会影响网页的效率。当然仅做一些少量的运算不会对访问的效果造成任何影响，但是不要过分依赖JavaScript，凡事都是适度最好。

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

编辑：网页学习网

本文地址:http://www.lodidance.com/css/jc/736.html