CN103853539A - 一种实现html表格列操作的方法 - Google Patents
一种实现html表格列操作的方法 Download PDFInfo
- Publication number
- CN103853539A CN103853539A CN201210512581.8A CN201210512581A CN103853539A CN 103853539 A CN103853539 A CN 103853539A CN 201210512581 A CN201210512581 A CN 201210512581A CN 103853539 A CN103853539 A CN 103853539A
- Authority
- CN
- China
- Prior art keywords
- node
- row
- html
- rowspan
- colspan
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明提出了一种实现HTML表格列操作的方法，在TD节点中增加自定义列属性，在表格初始化时将每个TD节点所在的列的序列值保存在该自定义属性中，通过该自定义属性匹配的列获得相应列的TD节点。本发明实现了HTML设计表格在进行rowspan或colspan操作后，相应的列值显示和实际查询返回的结果值保持一致。同时，本发明补充了HTML语言在表格设计方面的不足，以更加有效的方式提供良好的用户体验。
Description
技术领域
本发明涉及计算机技术领域，特别是涉及一种实现HTML表格列操作的方法。
背景技术
HTML是通向Web技术世界的钥匙，以其简易性、可扩展性、平台无关性的特点受到广泛的应用。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的调整和修饰，从而使网页更符合需求。在HTML中对表格进行合并操作时，使用的属性有跨行合并：rowspan和跨列合并：colspan，通过设置属性的值，即可实现行或列的合并。
但是HTML在进行合并操作后，在网页显示时存在一定的问题，对使用带来不小的影响。以跨行合并为例，HTML的数据是以一维数组的形式来实现各种操作的，在使用rowspan属性进行跨行合并之后，原来行数据的单元格对应的列的位置被占掉，虽然其行的值没有变化但列的位置却后移了。在查询有合并操作的列的信息时，返回的结果仍旧是变化前的列的信息，这样就在视觉上给使用者带来了干扰。特别是在表格中行或列的合并操作比较多，发生位置变化的单元格就相应的多，在查询时看到的列的内容和实际返回的查询结果的列的内容差别会很大，对原有表结构里的内容改变太大，且视觉上也不够美观。更进一步，在进行合并操作时，把被占位的单元格的显示内容删除，表面上看只改变了个别列的内容，对原有表内容改变不大，但是在查询该列内容时，其显示仍然包括被后移的单元格的内容，干扰性依然存在，不利于表的维护。
发明内容
针对以上问题，本发明提出了一种实现HTML表格列操作的方法，在TD节点中增加自定义列属性，在表格初始化时将每个TD节点所在的列的序列值保存在该自定义属性中，进行合并操作时，通过该自定义属性匹配的列获得相应列的TD节点。
为实现上述发明内容，本发明采用了一种实现HTML表格列操作的方法，该方法的技术方案如下：
一种实现HTML表格列操作的方法，在TD节点中增加自定义列属性，在表格初始化时将每个TD节点所在的列的序列值保存在该自定义属性中，通过该自定义属性匹配的列获得相应列的TD节点。
当表格中新增rowspan或colspan属性或原有rowspan或colspan属性值增加时，删除被rowspan或colspan的TD节点占位的TD节点。
当表格中减小rowspan或colspan属性值时，新增TD节点填补曾被rowspan或colspan的TD节点占位。
所述新增TD节点时，根据rowspan或colspan属性的变化值及所属TD节点的列属性为新增TD节点设置相应的自定义列属性。
与现有技术相比，本发明实现了HTML设计表格在进行rowspan或colspan操作后，相应的列值显示和实际查询返回的结果值保持一致。同时，本发明补充了HTML语言在表格设计方面的不足，以更加有效的方式提供良好的用户体验。
附图说明
图1为本发明所提供的一种实现HTML表格列操作的方法的实施例流程图；
图2a为本发明所提供的一种实现HTML表格列操作的方法合并单元格前的效果图；
图2b为未采用本发明时合并单元格后的效果图；
图2c为本发明所提供的一种实现HTML表格列操作的方法合并和删除单元格后的效果图。
具体实施方式
为了使本发明所提到的一种实现HTML表格列操作的方法及其优点更加清楚明确，以下参照附图对本发明进行更进一步的详细说明。
图1为本发明所提供的一种实现HTML表格列操作的方法的实施例流程图。如图1所示，该方法的主要流程如下：
步骤1，在表格TD节点中增加自定义列属性。
在表格初始化时将每个TD节点所在的列的序列值保存在该自定义属性中。
步骤2，新增合并操作。
这里合并操作有两种方式：跨行合并和跨列合并。每种合并操作又分增加和减少合并两种情况，操作时根据实际需求进行相应的合并操作。
步骤3，在HTML代码中匹配相应的自定义列属性。
根据单元格列的变化匹配自定义列的属性，并删除被rowspan或colspan的TD节点占位的TD节点或者新增TD节点填补曾被rowspan或colspan的TD节点占位。
步骤4，对网页中表格的检索和显示。
在网页中显示表格效果，查看单元格内容显示位置是否正确和检索返回的结果是否和实际表格显示一致。
图2a为本发明所提供的一种实现HTML表格列操作的方法合并单元格前的效果图，该图的内容部分为4行6列的单元格组成的表格，显示该图是为了与之后的效果图进行比对。
图2b为未采用本发明时合并单元格后的效果图。在图2a显示效果的基础上，对B3进行跨2行合并，对D2进行跨2列合并，合并后，第二行和第四行中单元格发生移动，E2、F2和B4、C4、D4、E4、F4列的位置发生变化。在查询的时候，本方法未自定义列属性，HTML查询返回的B列的结果为B1、B2、B3、B4，查询返回的E列的结果为E1、E2、E3、E4。可以看到，查询返回的结果和实际的显示是有视觉上的差异的，特别是在表格中合并的操作比较多且表格行列未固定时，显示的列中的单元格内容就会更加混乱，表格很难进行维护。
图2c为本发明所提供的一种实现HTML表格列操作的方法合并和删除单元格后的效果图。在图2a的基础上，对B3进行跨2行合并，对D2进行跨2列合并，并删除被B3覆盖掉的单元格B4和被D2覆盖掉的单元格E2。仅从图的表面上看不出什么差异，在查询的时候，如果未自定义列属性，HTML查询返回的B列的结果为B1、B2、B3、C4，查询返回的E列的结果为E1、E2、E3、F4；如果表格初始化前自定义列属性，HTML查询返回的B列的结果为B1、B2、B3、未定义(也可以显示其他的内容，根据HTML代码中的定义返回相应的内容)，查询返回的E列的结果为E1、未定义(也可以显示其他的内容，根据HTML代码中的定义返回相应的内容)、E3、E4。很明显，在未添加自定义列属性的情况下查询列中单元格内容，返回的结果和显示的结果仍然有差异，而添加自定义列属性的情况下，返回的结果和显示的结果是一致的。在表格中合并操作多的情况下，使用添加自定义列属性的方法效果会更显著。
同样，如果是减少合并的情况，在查询和显示时存在相同的问题，效果与前面效果图类似，在此不再赘述。
以上所述是对本发明的较佳的具体实施方式，本技术领域人员应当理解，所述实施方式并非限定本发明的保护范围。在不脱离本发明的精神实质和原则下，在细节方面可以进行变化或者修改，均应涵盖在本发明的权利要求范围之内。
Claims (4)
1.一种实现HTML表格列操作的方法，其特征在于，在TD节点中增加自定义列属性，在表格初始化时将每个TD节点所在的列的序列值保存在该自定义属性中，通过该自定义属性匹配的列获得相应列的TD节点。
2.如权利要求1所述的一种实现HTML表格列操作的方法，其特征在于，当表格中新增rowspan或colspan属性或原有rowspan或colspan属性值增加时，删除被rowspan或colspan的TD节点占位的TD节点。
3.如权利要求1所述的一种实现HTML表格列操作的方法，其特征在于，当表格中减小rowspan或colspan属性值时，新增TD节点填补曾被rowspan或colspan的TD节点占位。
4.如权利要求3所述的一种实现HTML表格列操作的方法，其特征在于，所述新增TD节点时，根据rowspan或colspan属性的变化值及所属TD节点的列属性为新增TD节点设置相应的自定义列属性。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210512581.8A CN103853539A (zh) | 2012-12-05 | 2012-12-05 | 一种实现html表格列操作的方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210512581.8A CN103853539A (zh) | 2012-12-05 | 2012-12-05 | 一种实现html表格列操作的方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN103853539A true CN103853539A (zh) | 2014-06-11 |
Family
ID=50861241
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210512581.8A Pending CN103853539A (zh) | 2012-12-05 | 2012-12-05 | 一种实现html表格列操作的方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103853539A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106681972A (zh) * | 2015-11-11 | 2017-05-17 | 北京国双科技有限公司 | 表格显示方法及装置 |
| CN112099898A (zh) * | 2020-11-06 | 2020-12-18 | 广州市玄武无线科技股份有限公司 | 一种基于Web前端的表格处理系统及方法 |
-
2012
- 2012-12-05 CN CN201210512581.8A patent/CN103853539A/zh active Pending
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106681972A (zh) * | 2015-11-11 | 2017-05-17 | 北京国双科技有限公司 | 表格显示方法及装置 |
| CN112099898A (zh) * | 2020-11-06 | 2020-12-18 | 广州市玄武无线科技股份有限公司 | 一种基于Web前端的表格处理系统及方法 |
| CN112099898B (zh) * | 2020-11-06 | 2021-02-09 | 广州市玄武无线科技股份有限公司 | 一种基于Web前端的表格处理系统及方法 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103064689B (zh) | 一种动态生成报表页面的实现方法及系统 | |
| CN102521417B (zh) | 一种基于虚拟数据立方体的多维数据处理方法及其系统 | |
| CN103605801B (zh) | 一种管理单据数据的方法和系统 | |
| CN105224564A (zh) | 一种网页适应屏幕排版方法及装置 | |
| CN104731594A (zh) | 一种基于Bootstrap显示运行时定制页面的方法 | |
| CN103136791B (zh) | 用于飞机数字化维修应用的数据关联方法及其装置 | |
| CN103488732A (zh) | 一种静态页面生成方法及装置 | |
| CN103812888A (zh) | 信息推送、接收、传输方法、服务器、客户端及系统 | |
| Zhu et al. | A bilayer resource model for cloud manufacturing services | |
| CN104636389A (zh) | 实现Hbase数据库实时查询的方法和系统 | |
| CN102073455B (zh) | 一种基于数据库的多屏幕数据切换显示方法 | |
| CN105354287A (zh) | 数据库元数据的获取方法及装置 | |
| CN103208068A (zh) | 一种全球采购系统 | |
| CN103853588A (zh) | 一种通过浏览器内核解析html表格列操作的方法 | |
| CN103853539A (zh) | 一种实现html表格列操作的方法 | |
| CN103220204A (zh) | 营销邮件的生成方法和装置 | |
| CN103399776A (zh) | 可重用mock创建方法及系统 | |
| CN103150391A (zh) | 基于配置文件的通用数据库表网页展示方法 | |
| Yuan et al. | Construction of the system framework of Spatial Data Warehouse in Internet of Things environments | |
| CN104536757A (zh) | 一种多级菜单的实现方法 | |
| CN107491494A (zh) | 一种应用于土壤环境监测系统的字段存储方法及系统 | |
| CN105511885B (zh) | 商业智能数据应用json描述实现数据可视化的方法 | |
| CN104063413A (zh) | 一种mysql数据库树状结构及其快速检索方法 | |
| CN103970735A (zh) | 一种网页Table中目标单元格的行列高亮显示方法 | |
| CN104281454A (zh) | 一种基于flex多层次布局的方法 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20140611 |