直接了当一些, displayTag有个缺点:用它生成的HTML table里不能对表头做什么操作(除它自带的排序功能外). 项目中有这么一个需求,要对table中的某一列的具体业务意义做详细的说明. 于是想做成这样: 当用户把鼠标放到那个列的表头时, 就弹出一段文字来解释这一列的具体意义. 最终的效果如下图所示:
当用户把鼠标放到"上月实测带宽"这一单元格上时,图中"1"所指的文字就显示出来. 当鼠标从"上月实测带宽"单元格离开后,"1"所指文字消失.
实现大致思路:
1, 用JavaScript定位到指定单元格:var cell = document.getElementById(tableID).getElementsByTagName("thead")[0].rows[0].cells[cellIndex];
2, 对指定单元格加onmouseover/onmouseout事件.
3, 用JavaScript画出/操作文本框.
4, 把文本框的操作跟上面的onmouseover/onmouseout事件绑定.
具体实现请参考附件(注: 附件中的JavaScript是在IE上运行的, 若想在FireFox里运行,可改下onmouseover/onmouseout事件响应方法的传参).
分享到:
相关推荐
NULL 博文链接:https://rmn190.iteye.com/blog/257135
NULL 博文链接:https://rmn190.iteye.com/blog/545650
DisplayTag标签使用说明DisplayTag标签使用说明DisplayTag标签使用说明DisplayTag标签使用说明DisplayTag标签使用说明DisplayTag标签使用说明
关于displaytag标签的使用 使用方便 做网页的时候用的着
示例如何使用displaytag,详细介绍displaytag在使用方式上的不同,具有举一反三的效果
displaytag标签使用详解 应用实例
displaytag所有包(资源) 及使用方法
displaytag的使用方法(用于数据表格的显示和功能控制)Displaytag1.1版本使用方法
基于DisplayTag的分页方案
绝对简单,一看就明白直接运用到自己的项目上,鼠标放到第一个标题上就会有反映了。
displaytag-1.2.jar 显示标签
总结网络中Display Tag使用,非常经典,帮助你学习和了解displaytag
非常好的资源,提供用运,技术,思路,例子,是人轻松灵活的运用
displaytag 表格 标签 displaytag-1.1.1标签库及其使用方法
DisplayTag分页及属性
Displaytag实现分页
displaytag-1.2
displaytag1.2.jar 下载