onmouseover 纵向改变底色效果

郁闷了一个星期,终于想通了这个效果应该怎么做出来了,先来看看效果图吧.小时候读得书少,连标题都写不好,不懂怎么表达这个意思.....

onmouseover时:

(数据摘自PCONLINE,灵感也来自这里,看看"内存报价_PConline广州市场三大件报价及走势分析"的网页就知道) 再来看看HTML结构(这里使用的是table):

如果是横行改变底色是很容易,只要为 增加行为onmouseover 就可以了.但这里同时改变的HTML节点(td)是在不同的父节点上(tr),我想到的解决的方法是将整个TABLE包含的TD节点映射为一个二维数组.再类似于坐标轴那样的定位,如下图.

当鼠标移到某一个TD上,就会得到这个TD的(X,Y)坐标,然后将X坐标相同的TD更改底色.

建立二维数组:

var table = document.getElementById("tab");
var tr_ary = table.getElementsByTagName("tr");//table 里面的TR节点的一维数组
var square = new Array();
for(var i = 0;i{
if (!tr_ary[i].getElementsByTagName("td")) continue;
square[i] = tr_ary[i].getElementsByTagName("td");
}

如果是横行改变底色是很容易,只要为 增加行为onmouseover 就可以了.但这里同时改变的HTML节点(td)是在不同的父节点上(tr),我想到的解决的方法是将整个TABLE包含的TD节点映射为一个二维数组.再类似于坐标轴那样的定位,如下图.当鼠标移到某一个TD上,就会得到这个TD的(X,Y)从标,然后将X坐标相同的TD更改底色.

建立二维数组:

var table = document.getElementById("tab");
var tr_ary = table.getElementsByTagName("tr");//table 里面的TR节点的一维数组
var square = new Array();
for(var i = 0;i{
if (!tr_ary[i].getElementsByTagName("td")) continue;
square[i] = tr_ary[i].getElementsByTagName("td");//利用包含TR的数组建立TD的二维数组
}

上面的代码就把这个数组建立起来,square[i][j],i不代表第(i+1)行,j代表第(j+1)列的TD对象,如:square[2][4],就是指第3行的第5个TD对象(第3个TR中,第5个TD对象).但这样是不能做到定位的,因为任一个TD对象都没有定位的属性(即(X,Y)坐标值),现在有做的就是为每个TD对象增加个一坐标值,那么在JAVASCRIPT 中就是为对象增加属性.

PS:略述对象增加属性的方法

增加对象属性如下:object.element = statement;//为这个object 增加一个属性名为"element"的属性,并且值为statement
例如: people.eyes = 2;//people 是一个自定义的对象

那么,我们为某个TD对象增加属性的代码如下:

square[0][1]._x = 1;//square[0][1] 位于第1行的第2列
square[0][1]._y = 0;

上面这个TD对象从坐标轴上说坐标应该是(1,2),但这个也是相对的,至少对这里这个坐标并没有造成什么负面影响,并且你也发现到了这个是二维数组的下标对应起来了,那么只要我把这个下标调出来并赋给到自身的坐标属性中去.但这样就出现了一个新的问题,就是我找不到JAVASCRIPT中可以数组下标调出来的函数(或方法,属性).

最后我使用了for/in 解决了这个问题

for/in语法

for (key in array)
{...}
这个语句第一次执行时把array的第1个元素的下标赋给key,第二次执行时把array的第2个元素的下标赋给key,如此类推,直到遍历完这个数组array为止.

for(key in square)
{
for(key2 in square[key])
{
square[key][key2]._x = key2;//X轴坐标
square[key][key2]._y = key;//Y轴坐标
}
}

到了这一步,大问题都解决了,要做的就是为每个TD增加一个ONMOUSEOVER行为

为了方便使用,我写了一个二维数组,根据下标值改变作为同一列的的对象,当然这个函数兼容必较差,只能为当前这个效果服务了

function colChangeStyle(array,xpos,ypos,color)
//数组需要为二维数组,并且根据xpos值改变相对应列对象的底色,ypos参数暂时是没有了,可以删掉这个参数
{
for(var i=0;i{
array[i][xpos].style.backgroundColor = color;
}
}

为每个TD对象增加onmouseover行为,并增加onmouseout行为,使onmouseout 时还原默认的底色

for (var i=0;i{
for(var j=0;j{
square[i][j].onmouseover = function ()
{
colChangeStyle(square,this._x,this._y,"#ffaf4f");
}
var def_style = square[i][j].style.color;
square[i][j].onmouseout = function ()
{
colChangeStyle(square,this._x,this._y,def_style);
}
}
}

下面是整个函数的代码

function tab()
{
if (!document.getElementById("tab")) return false;
var table = document.getElementById("tab");
if (!table.getElementsByTagName("tr")) return false;
var tr_ary = table.getElementsByTagName("tr");
var square = new Array();
for(var i = 0;i{
if (!tr_ary[i].getElementsByTagName("td")) continue;
square[i] = tr_ary[i].getElementsByTagName("td");
}
// square talbe 为对象数组
//for (var i=0;i//{
// document.write(square[i].length);
//}
for(key in square)
{
for(key2 in square[key])
{
square[key][key2]._x = key2;
square[key][key2]._y = key;
}
}

for (var i=0;i{
for(var j=0;j{
square[i][j].onmouseover = function ()
{
colChangeStyle(square,this._x,this._y,"#ffaf4f");
}
var def_style = square[i][j].style.color;
square[i][j].onmouseout = function ()
{
colChangeStyle(square,this._x,this._y,def_style);
}
}
}
}

function colChangeStyle(array,xpos,ypos,color)//数组需要为二维数组
{
for(var i=0;i{
array[i][xpos].style.backgroundColor = color;
}
}