利用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) ;
}
生产线上有一个基于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) ;
}
相关文章推荐
- table表格js简单操作隐藏与显示出现结构错乱解决方法
- 利用表格分页显示数据的js组件datatable的使用
- WebView加载完网页之后利用js进行网页刷新,解决webview显示图片适应所有的机型
- 利用表格分页显示数据的js组件bootstrap datatable的使用
- UEditor 的表格加载正常,第二次却显示不出来,vue.js里面的解决方法
- 利用js实现表格的显示隐藏
- js创建10万行表格 页面显示10万行数据
- 利用百度地图API显示多个地标信息弹出提示框的解决方法
- JS弹出框显示乱码怎么解决
- 利用JS做到隐藏div和显示div
- HTML中利用CSS来使表格里的数据过长时用...或省略显示
- ASP.NET基础教程-DataGrid表格控件-利用模板列中显示检索的数据
- JS实现简洁(隔行换色、高亮显示)表格特效
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- IDEA 中写jsp文件时,发现里面加载不了js文件和css文件(解决css文件在eclipse中显示不了)
- 解决nginx服务器图片(js/背景图片)不能显示问题
- 表格内容超出范围显示异常解决办法
- 解决three.js加载外部obj文件在chrome浏览器中无法显示的问题
- 解决JSP引入JS文件后,JS文件中字符在页面上显示为乱码问题
- PB webForm中用js实现选中行突出显示