用JavaScript操作displayTag表头操作

     直接了当一些, 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事件响应方法的传参).