`

用JavaScript操作displayTag表头操作

JavaScriptIEFirefoxHTML 
阅读更多

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

2
顶
1
踩
分享到：
| jBPM(五): 部署jBPM所用表到数据库_2
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    JavaScript与displayTag标签的合作 -- 操作表头.

    以下是一个简单的示例，展示了如何使用JavaScript和displayTag实现表头的动态操作： ```html 列1" sortable="true" /> 列2" sortable="true" /> <script src="path/to/jquery.js"></script> $(document)....

    JavaScript与displayTag标签的合作 -- 操作表头(二)

    在"JavaScript与displayTag标签的合作 -- 操作表头(二)"这个主题中，我们主要关注的是如何利用JavaScript来实现对表格表头的动态操作，比如改变列宽、隐藏或显示列、添加自定义事件等。 1. **动态调整列宽**：...

    displaytag-jar.rar_Displaytag.jar_displaytag_displaytag 1.2 jar_

    在实际开发中，使用Displaytag时，需要在JSP页面上添加Displaytag的标签，并配置相应的属性，例如表格数据源、分页参数等。然后，Displaytag会处理这些信息，生成对应的HTML代码并返回给浏览器。通过这种方式，...

    displaytag详细用法(中文问题已解决）

    2. **标签库**：DisplayTag基于JSTL标签库，可以在JSP页面中使用，例如`<display:table>`、`<display:column>`等，这些标签提供了丰富的属性来定制表格的行为。 3. **中文问题**：在处理中文字符时，DisplayTag可能...

    displaytag分页jar包和使用说明

    - **自定义列头**：通过`headerClass`和`footerClass`属性可以设置表头和表脚的样式，同时可以用`header`属性为列头添加自定义内容。 - **导出功能**：DisplayTag支持导出表格数据为CSV、Excel等格式，只需添加`...

    displaytag-DEMO.zip_DEMO_displaytag de_displaytag demo_displayta

    下面我们将深入探讨DisplayTag的核心特性、如何使用以及它在实际开发中的应用。 1. **DisplayTag概述** DisplayTag是一个基于JSP标签库的组件，它的主要目标是提供一个易用且强大的表格显示解决方案。它不仅支持...

    displaytag

    DisplayTag提供了许多预定义的样式和行为，帮助开发者构建功能丰富的表格，而无需编写大量HTML和JavaScript代码。 描述中提到的"displaytag-1.2-src.zip"和"displaytag-1.2-bin.zip"是DisplayTag库的两个不同版本。...

    displaytag,dhtmlXGrid,eXtremeComponents哪个更好?

    它提供了丰富的功能，包括编辑、过滤、拖放、多级表头等，支持Ajax无刷新操作，能提供高度动态和交互性的用户体验。dhtmlXGrid的灵活性很高，允许开发者自定义样式和行为，非常适合构建复杂的数据视图。但是，由于是...

    display tag使用总结文档

    - 使用Display Tag的内置功能，如分页和排序，而不是手动编写JavaScript或jQuery插件。 - 避免在表格中包含过多的复杂逻辑，保持JSP页面简洁。 - 对于复杂的定制需求，考虑使用自定义列标签或事件监听器。 ...

    dispalytag demo

    这个"dispalytag demo"应该是DisplayTag库的一个示例项目，帮助开发者理解和学习如何使用DisplayTag来美化和增强网页中的表格功能。 DisplayTag的核心功能包括： 1. **分页**：DisplayTag可以自动处理数据的分页...

    diplaytag分页控件

    2. **创建JSP页面**：在JSP页面中引入DisplayTag的标签库，并使用`<display:table>`标签来定义表格。 3. **设置属性**：配置`<display:table>`的属性，如`id`（表格ID）、`name`（数据源）、`pagesize`（每页显示的...

    eXtremeComponents参考文档

    - **JavaScript属性**：支持JavaScript事件，如onmouseover或onclick等。 - **扩展属性**：提供了一系列扩展属性，以适应更复杂的需求。 #### 5. ColumnTag ##### 5.1 引言 ColumnTag用于定义表格中的列。 - **Cell...

Magicbox
Global site tag (gtag.js) - Google Analytics