CN103853588A

CN103853588A - 一种通过浏览器内核解析html表格列操作的方法

Info

Publication number: CN103853588A
Application number: CN201210512607.9A
Authority: CN
Inventors: 牟春林
Original assignee: SUZHOU JINGYIHUI INFORMATION TECHNOLOGY Co Ltd
Current assignee: SUZHOU JINGYIHUI INFORMATION TECHNOLOGY Co Ltd
Priority date: 2012-12-05
Filing date: 2012-12-05
Publication date: 2014-06-11

Abstract

本发明提出了一种通过浏览器内核解析HTML表格列操作的方法，所述方法包括以下步骤：a.在浏览器内核的解析器中增加对表格中TD节点的列属性的解析功能；b.在表格初始化时将每个TD节点所在的列的序列值保存在列属性中；c.通过该属性匹配的列获得相应列的TD节点；d.浏览器内核解析并显示列变动后的HTML表格。本发明实现了HTML设计表格在进行rowspan或colspan操作后，浏览器中相应的列值显示和实际查询返回的结果值保持一致。同时，本发明补充了HTML语言在表格设计方面的不足，以更加有效的方式提供良好的用户体验。

Description

一种通过浏览器内核解析HTML表格列操作的方法

技术领域

本发明涉及计算机技术领域，特别是涉及一种通过浏览器内核解析HTML表格列操作的方法。

背景技术

HTML是通向Web技术世界的钥匙，以其简易性、可扩展性、平台无关性的特点受到广泛的应用。无论在日常生活和工作中，还是在网页设计中，表格通常都可以使信息更容易理解。HTML具有很强的表格功能，使用户可以方便地创建出各种规格的表格，并能对表格进行特定的调整和修饰，从而使网页更符合需求。在HTML中对表格进行合并操作时，使用的属性有跨行合并：rowspan和跨列合并：colspan，通过设置属性的值，即可实现行或列的合并。

但是HTML在进行合并操作后，在网页显示时存在一定的问题，对使用带来不小的影响。以跨行合并为例，HTML的数据是以一维数组的形式来实现各种操作的，在使用rowspan属性进行跨行合并之后，原来行数据的单元格对应的列的位置被占掉，虽然其行的值没有变化但列的位置却后移了。在查询有合并操作的列的信息时，返回的结果仍旧是变化前的列的信息，这样就在视觉上给使用者带来了干扰。特别是在表格中行或列的合并操作比较多，发生位置变化的单元格就相应的多，在查询时看到的列的内容和实际返回的查询结果的列的内容差别会很大，对原有表结构里的内容改变太大，且视觉上也不够美观。更进一步，在进行合并操作时，把被占位的单元格的显示内容删除，表面上看只改变了个别列的内容，对原有表内容改变不大，但是在查询该列内容时，其显示仍然包括被后移的单元格的内容，干扰性依然存在，不利于表的维护。

发明内容

针对以上问题，本发明提出了一种通过浏览器内核解析HTML表格列操作的方法，在浏览器内核的解析器中增加对表格中TD节点的列属性的解析功能，在表格初始化时将每个TD节点所在列的序列值保存在列属性中，进行合并操作时，获得相应列的TD节点，最后通过浏览器内核解析并显示。

为实现上述发明内容，本发明采用了一种通过浏览器内核解析HTML表格列操作的方法，所述方法包括以下步骤：

a.在浏览器内核的解析器中增加对表格中TD节点的列属性的解析功能；

b.在表格初始化时将每个TD节点所在的列的序列值保存在列属性中；

c.通过该属性匹配的列获得相应列的TD节点；

d.浏览器内核解析并显示列变动后的HTML表格。

当表格中新增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为未采用本发明时HTML合并单元格后浏览器显示的效果图；

图2c为本发明所提供的一种通过浏览器内核解析HTML表格列操作的方法合并和删除单元格后的效果图。

具体实施方式

为了使本发明所提到的一种通过浏览器内核解析HTML表格列操作的方法及其优点更加清楚明确，以下参照附图对本发明进行更进一步的详细说明。

图1为本发明所提供的一种通过浏览器内核解析HTML表格列操作的方法的实施例流程图。如图1所示，该方法的主要流程如下：

步骤1，在浏览器内核的解析器中增加对表格中TD节点列属性的解析功能。

使用时，需事先部署具有解析HTML表格中TD节点列属性功能的浏览器。

步骤2，将每个TD节点所在的列的序列值保存在列属性中。

在表格初始化时，在列属性中保存TD节点所在列的序列值。

步骤3，新增合并操作。

这里合并操作有两种方式：跨行合并和跨列合并。每种合并操作又分增加和减少合并两种情况，操作时根据实际需求进行相应的合并操作。

步骤4，获得相应列的TD节点。

根据单元格列的变化匹配列的属性，并删除被rowspan或colspan的TD节点占位的TD节点或者新增TD节点填补曾被rowspan或colspan的TD节点占位。

步骤5，浏览器内核解析并显示列变动后的HTML表格。

在浏览器中打开网页显示表格效果，查看单元格内容显示位置是否正确和检索返回的结果是否和实际表格显示一致。

图2a为本发明所提供的一种通过浏览器内核解析HTML表格列操作的方法合并单元格前的效果图，该图的内容部分为4行6列的单元格组成的表格，显示该图是为了与之后的效果图进行比对。

图2b为未采用本发明时HTML合并单元格后浏览器显示的效果图。在图2a显示效果的基础上，对B3进行跨2行合并，对D2进行跨2列合并，合并后，第二行和第四行中单元格发生移动，E2、F2和B4、C4、D4、E4、F4列的位置发生变化。在查询的时候，如果使用的浏览器内核未含解析HTML表格中列属性的功能，那么浏览器显示的HTML查询返回B列的结果为B1、B2、B3、B4，查询返回的E列的结果为E1、E2、E3、E4。可以看到，查询返回的结果和实际的显示是有视觉上的差异的，特别是在表格中合并的操作比较多且表格行列未固定时，显示的列中的单元格内容就会更加混乱，表格很难进行维护。

图2c为本发明所提供的一种通过浏览器内核解析HTML表格列操作的方法合并和删除单元格后的效果图。在图2a的基础上，对B3进行跨2行合并，对D2进行跨2列合并，并删除被B3覆盖掉的单元格B4和被D2覆盖掉的单元格E2。仅从图的表面上看不出什么差异，但在查询的时候，如果使用的浏览器内核未含解析HTML表格中列属性的功能，浏览器显示的HTML查询返回的B列的结果为B1、B2、B3、C4，查询返回的E列的结果为E1、E2、E3、F4；如果使用的浏览器内核含解析HTML表格中列属性的功能，浏览器显示的HTML查询返回的B列的结果为B1、B2、B3、未定义(也可以显示其他的内容，根据浏览器内核中解析器对列属性的设置返回相应的内容)，查询返回的E列的结果为E1、未定义(也可以显示其他的内容，根据浏览器内核中解析器对列属性的设置返回相应的内容)、E3、E4。很明显，在浏览器的内核不能解析列属性的情况下查询列中单元格内容，返回的结果和显示的结果仍然有差异，而在浏览器的内核可以解析列属性的情况下，返回的结果和显示的结果是一致的。在表格中合并操作多的情况下，使用带有解析列属性的浏览器内核的方法效果会更显著。

同样，如果是减少合并的情况，在查询和显示时存在相同的问题，效果与前面效果图类似，在此不再赘述。

以上所述是对本发明的较佳的具体实施方式，本技术领域人员应当理解，所述实施方式并非限定本发明的保护范围。在不脱离本发明的精神实质和原则下，在细节方面可以进行变化或者修改，均应涵盖在本发明的权利要求范围之内。

Claims

1.一种通过浏览器内核解析HTML表格列操作的方法，其特征在于，所述方法包括以下步骤：

c.通过该属性匹配的列获得相应列的TD节点；

d.浏览器内核解析并显示列变动后的HTML表格。

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节点设置相应的列属性。