您的位置:首页 > Web前端 > JavaScript

利用JS解决同组表格的突出显示

2009-08-22 16:33 344 查看
问题的提出:

生产线上有一个基于WEB 的实时监控程序,基本思想就是基于ajax的定时刷新,并将柜子上的机器工作情况以表格的形式直观的显示出来,图我就不画了,反正是挺复杂的 有 1X2 , 2X1 2X 2, 2 X4, 1 X0.5 甚至有1 X 8 ,2 X8的 数据,最近提出一个新的需求,因为有的好几台机器同属于一个系的,但在表格上并不相邻(因为在实际物理位置上也是不相邻的),

解决方案:

鼠标移动一个cell上时,与其相同的main ID的cell以相同颜色标识出来,当鼠标移开时还原原来的颜色(原来的颜色代表当前cell的状态)。

难点:

表格属性有ID没有Name,还要有一个地方来保存当前cell的颜色,以便能还原。

代码实现:

感谢HTML,感谢JS的当初设计者。下面开始

1. 以ID来标识同一组的cell, ID相同的cell为一组,在Html中是允许ID重复的。这样我们可以通过document.all(id)来获得所有相同ID的cell。拿到后自己去处理。

2 属性是可以扩展的,一个TD除了标准属性外,可以添加多个属性,在这里我们取个太不合适的属性,用来记住原来的颜色,例如mc="#ce2800".

3 改变颜色不用说了,自己随便定,还原代码如下

function restore(id){

var objArray = document.all(id);

for(var c = 0; c < objArray.length; c++){

objArray[c].style.backgroundColor = objArray[c].mc;

}

}

如果想做成闪烁的效果也是可以的,用setTimeout(fun(), time)来解决,要注意的是参数传递如下就行

{

..........

var _id = ${id};

setTimeout(" restore(' " + _id + " ') " , 5000) ;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐