利用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) ;

 

       }

 

      

微信扫码订阅
UP更新不错过~
关注
  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

yekai012

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值