状态的单元格(即表格左侧的第二个可见单元格)作为计算的基准单元格。当然，也可以直接设定触发区域左侧的可见单元格为基准单元格。
[0086]将所述基准单元格记作currTh，将该基准单元格右侧的首个可见单元格记作nextTh，例如可以采用while循环的方式对currTh右侧的可见单元格进行搜索，搜索到的第一个可见单元格即为nextTh。接上例，表格左侧第二个可见单元格即为currTh，其宽度为thisThWidth，而表格左侧第三个可见单元格即为nextTh，其宽度为nextThWidth，并且计算两个单元格的宽度之和twoTdWidth。若单独改变某一单元格的列宽，那么会造成表格整体宽度的变化，破坏整体的布局，因此通过同时改变两个相关单元格的列宽，当基准单元格currTh的列宽减少时，相应增加nextTh的列宽，来保证表格的整体宽度不变，使得列宽调整不会破坏表格的整体布局。
[0087]然后获取基准单元格currTh的位置，与前述方式类似，该位置同样可以采用基准单元格的左侧边界与网页窗口的左侧的距离来表示，记作thisThleft，鼠标的当前位置event.clientX，并由此计算基准单元格的位置与鼠标当前位置的位置差currThWidth。通过currThWidth-thisThWidth的值可以确定鼠标当前所在的位置是处于currTh还是nextTh，若 currThWidth-thisThWidth > 0，则表不鼠标处于 nextTh 内，更新表格后 currTh的列宽变大；若currThWidth-thisThWidth < 0，则表示鼠标处于currTh内，更新表格后currTh的列宽变小。此时，相关单元格中基准单元格currTh的列宽值为currThWidth的值，而nextTh的列宽值即为twoTdWidth-currThWidth的值。而其余同一行中其余单元格的列宽值在拖动前后不会发生变化，直接获取其原有的列宽值即可。
[0088]步骤S202，将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息。为了在数据传递过程中的准确性，可以通过带有索引值的数组的形式保存所述每个单元格的列宽信息。具体地，将所述相关单元格的列宽值和同一行中其余单元格的列宽值作为所述表格的列宽信息，包括:获取所述相关单元格和同一行中其余单元格的索引值，根据索引值建立保存所述列宽信息的数组，并将所述列宽值作为数组中对应的数组元素的值。在更新显示表格时，可以直接获取该数组，再根据每个单元格的索引值由数组中提取其对应的列宽值。
[0089]由于实时计算表格的列宽信息时，获取的列宽值均为具体数值，例如获得的各个单元格的列宽值分别为100像素、150像素等，并且步骤103在根据所述表格的列宽信息显示所述表格时，同样是根据具体数值进行显示。因此，当网页窗口的大小调整时，表格只能适应网页定宽布局，不能随着网页窗口的调整而随之发生变化，无法适应网页弹性布局。为解决上述问题，本申请实施例提供了一种优选的实施方式，在根据所述表格的列宽信息显示所述表格之后，还包括:将所述表格的列宽信息由同一行中每个单元格的列宽值转换为每个单元格的列宽值占表格总宽度的百分比。此时，数组中保存的列宽信息为每个单元格的列宽值占表格总宽度的百分比，当网页窗口的大小调整时，表格的列宽能够根据网页窗口的变化按比例进行缩放，从而能够适应弹性布局。
[0090]进一步地，在进行列宽调节之前，也可以将列宽信息以百分比的形式保存，以适应在列宽调整之前的网页窗口变化。具体地，在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，还包括:获取所述表格中同一行中每个单元格的列宽值，并将所述同一行中每个单元格的列宽值转换为同一行中每个单元格的列宽值占表格总宽度的百分比。由于进行百分比形式的转换需要占用一定的计算资源，因此转换一般在根据所述操作点的当前位置信息确定所述操作点处于触发区域之前，以及在根据所述表格的列宽信息显示所述表格之后进行，以避免和列宽调节时的实时计算过程同时占用计算资源，导致该时段的计算量过大，影响拖拽调节的效果。
[0091]本实施例中，获取所述表格中同一行中每个单元格的列宽值，具体包括:若所述表格或所述表格的父元素的属性为隐藏，则将所述属性设置为显示，获取所述表格中同一行中每个单元格的列宽值，再将所述属性设置为隐藏。在获取列宽值时，由于隐藏的元素是无法获取其列宽值，因此首先需要判断表格是否处于隐藏状态，如果表格是隐藏的，则判断是其本身隐藏还是其父元素隐藏。此处可以使用while循环向上层的父元素进行搜索，直至查到不是隐藏的父元素。将最上层的一个隐藏的父元素设置为显示，此时就可以获取到表格中每个单元格的列宽值。在完成百分比形式的转换后，可以将设置为显示的隐藏元素，重新设置为隐藏。
[0092]此外，在某些应用场景下，可能由于表格的行数过多导致高度较大，其表头(即表格的第一行)往往是对每一列内容的描述。因此在通过纵向的滚动条操作表格的内容进行纵向滚动时，需要让表头固定，使得用户在滚动过程中仍然能够看到对每一列内容的描述。由于表格本身没有固定表头的功能，因此在实现时会将另一个只有一行的表格作为原表格的固定表头，定位在原表格的第一行的位置，从而形成表头固定的效果。由于所述的固定表头和原表格实质为两个表格，因此在根据计算得到的新的列宽信息更新显示表格时，需要对固定表头进行深度克隆，具体地在步骤S103中，根据所述表格的列宽信息显示所述表格，包括:若存在固定表头，将所述表格的列宽信息复制为所述固定表头的列宽信息，根据所述表格的列宽信息显示所述表格，同时根据所述固定表头的列宽信息显示所述固定表头。由此可以保证原表格和固定表头在直观上显示为相同的列宽，保证视觉效果上的一致性。进一步地，由于在显示原表格时可以采用两种方式:1、根据实时计算的结果，采用每一时刻计算得到的列宽信息显示所述表格。2、在鼠标抬起时，获取当前时刻的列宽信息显示所述表格。类似地，所述固定表头也可以采用类似的方式进行实时更新显示或者仅进行一次更新显示。
[0093]图3示出了本申请实施例提供的一种调节表格列宽的设备，第一装置310、第二装置320和第三装置330。具体地，所述第一装置310用于根据所述操作点的当前位置信息确定所述操作点处于触发区域；所述第二装置320用于在获取到所述操作点在所述触发区域内执行的调节触发操作之后，根据所述操作点的当前位置信息和所述相关单元格的当前位置信息获取表格的列宽信息；所述第三装置330用于根据所述表格的列宽信息显示所述表格。
[0094]在此，所述操作点包括但不限于用户在触摸屏上的触摸位置；或者用户所操作的鼠标、轨迹球或触控板等交互装置在显示屏上的对应光标位置。本实施例中的技术方案根据操作点的当前位置信息确定所述操作点处于触发区域，只有当操作点进入到触发区域时进行列宽的调节计算，不会引起原有DOM结构的变化，所以侵入式比较低，不会与其它作用于表格的插件冲突，所以适应性比较好。
[0095]在此，本领域技术人员应当理解，所述设备可以包括但不限于用户设备、网络设备或用户设备与网络设备通过网络相集成所构成的设备。所述用户设备包括但不限于个人计算机、触控终端等实现；所述网络设备包括但不限于如网络主机、单个网络服务器、多个网络服务器集或基于云计算的计算机集合等实现。在此，云由基于云计算(Cloud Computing)的大量主机或网络服务器构成，其中，云计算是分布式计算的一种，由一群松散耦合的计算机集组成的一个虚拟计算机。
[0096]在实际应用中，所述操作点的当前位置信息包括所述操作点与网页的窗口一侧之间的第一距离，通过获取操作点到网页的窗口一侧的距离作为计算的依据，而不是采用与DOM边界的距离作为计算的依据，可以适应网页横向宽度较大且有横向滚动条的情况，不会出现定位错误。如图6中，所述操作点6A为鼠标在显示屏上的对应光标位置，该位置与网页的窗口一侧之间的距离即为第一距离601，一般情况下可以将网页的窗口左侧作为基准，即第一距离为鼠标的光标位置与网页窗口左侧的距离，本实施例中使用event.clienX表示该第一距离。而所述触发区域6B包括两个相邻的可见单元格之间的分隔线两侧预设宽度内的区域。在实际判断时，所述第一装置310，具体用于:若所述第一距离与第二距离之差是否小于阈值，则确定所述操作点当前处于触发区域内，其中所述第二距离602为任意两个相邻的可见单元格之间的分隔线6C与所述网页的窗口一侧的距离。当确定操作点进入到触发区域后，可以改变鼠标的光标形态，用来标识已经进入到了可以进行拖拽调节的触发区域内。
[0097]由于触发区域仅为两个相邻的可见单元格之间的区域，为了避免在操作点移动到表格的边界时，即最左侧的可见单元格的左边界和最右侧的可见单元格的右边界的附近时，出现光标形状改变的情况，可以先对某一单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格进行判断。在实际应用中，可以采用的jQuery的prevAll (': visible’)和nextAll(’: visible’)对可见单元格进行遍历，判断某一可见单元格是否为表格中最左侧的可见单元格或者最右侧的可见单元格。若某一可见单元格不是表格中最左侧的可见单元格或者最右侧的可见单元格，那么该单元格的左边界和右边界均可以作为分隔线确定以确定触发区域，从而实现拖拽调节列宽。
[0098]例如对于表格左侧的第三个可见单元格th，该单元格的左边界与网页的窗口左侧的距离可以通过 j Query 的 th.get (O).getBoundingClientRect ().left 的方式获取，采用该方式可以适用于页面横向宽度较大，存在横向滚动时的场景。由于表格左侧的第三个可见单元格的左边界即为与第二个可见单元格之间的分隔线，其右边界为与第四个可见单元格之间的分隔线。若本实施例中将该距离值定义为left，第三个可见单元格的宽度定义为th.WidthO，那么第二个可见单元格和第三个可见单元格之间的分隔线的位置可以由left确定，而第三个可见单元格和第四个可见单元格之间的分隔线的位置可以由th.width O +left确定。由此，通过对比第一距离event.clienX与left或者th.width()+left即可确定鼠标是否进入到触发位置。本实施例中，当| event.clientX-left < 3px 或者 th.width () +left-event.clientX < 3px 的情况下，也就是鼠标移动至第三个可见单元格th的边界附近3个像素的位置时，即进入了拖动调节列