js动态合并表格单元格

来源:互联网 发布:no sleep mac下载 编辑:程序博客网 时间:2024/06/13 08:31

最近做项目要做一个自定义表单(由用户自己定义表单的样式和内容)用表格做,这就牵涉到对表格的操作。

对表格的操作无非就是对行和列的添加和删除,单元格的合并和拆分。对表格的行列操作这些都没得什么号说的,比较的简单,但是对单元格的合并和坼分还不是那么简单。

  先说说单元格的坼分,这个首先我们先要得到选中要坼分的单元格,获取他的colspan和rowspan属性即获取当前单元格合并了几行几列,我们好进行坼分。如果当前单元格没有合并,在火狐浏览器中取值为undefined,IE浏览器为1。如果当前单元格有合并我们可根据获取的值在指定的行添加单元格即可并删除当前选中单元格colspan和rowspan属性。

   合并单元格可以一个麻烦的事情而且方法也不止一种,我主要想到下面三种方法:

   、像Excel那样合并,向选择要合并的单元格(连续的一个矩形),把选择区域的一合并的单元格先坼分,再进行选择单元格的合并操作。设置选择单元格的第一个单元格的colspan和rowspan属性,合并的行数:最后一个单元格的行编号-第一个单元格的行编号,合并的列数:选择的总单元格个数/行数。(会先坼分选择区域的单元格坼分,所以选择区域的单元格时规范的不会存在有被合并的单元格)。再删除其他的选中的单元格。

   、两点可以确定一条直线,两点也可以确定一个矩形。我们先选择要合并区域的首尾两个单元格,设置第一个单元格的colspan和rowspan属性,再删除其他的单元格。

   这种方式需要给每个单元格定一个坐标位置(<td c=0,r=0></td>),这时我们能通过上边第一种方式获取合并的行数,只能通过它的坐标c来获取合并的列数(不能通过当前单元格在该行的索引来获取,因为在他之前有可能有被合并的单元格),删除单元格我们需要循环判断,从第一个单元格的行开始,最后一个单元格的行结束,判断每一行的每一个单元格是否在开始单元格的c和结束单元格的c之间,如在这之间就删除,不在则不删除。  这种方式我们需要判断选择区域的单元格是否规范(选择区域中如果有已合并的单元格必须完全包含,为完全包含的是不规范的选择)。

   三、这种方式比较简单,一次值合并一个单元格。合并当前选择单元格的后一个单元格和下一行的当前位置的单元格。这种也需要给每行的td加一个c属性,来标示当前td是属于第几列的(判断比较的简单,但是对于要合并多个的情况下就不是很好)。

        向右合并:只需要判断后一个单元格的rowspan的属性和当前单元格的rowspan属性是否相等,如相等就更改当前单元格的rowspan属性(当前rowspan+后一个单元格的rowspan值),在删除当前单元格的后一个单元格即可。不相等就不合并了。

        向下合并:只需要判断下边一个单元格的colspan属性是否和当前单元格的colspan属性是否相等。先获取当前单元格的真实位置,在获取下一列当前位置的单元格(根据c属性来判断下一行的当前位置),再判断是否合符合并的要求。


             还望多多指点

原创粉丝点击