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

问题的提出：

          生产线上有一个基于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) ;

 

       }