使用JavaScript实现动态创建含合并单元格（行）的表单

基于浏览器展现HTML网页中的表（是指Table），普遍用于数据展现和录入，其中数据分类又常用合并单元格。

在HTML DOM中，Table中的行数据是可以通过JavaScript的函数方法insertRow(index)动态增加的，通过insertCell(index)增加单元格。

其中，比较麻烦的是合并单元格，这里以行合并为例，使用rowspan属性的设置来实现，关键点是insertRow(index)和insertCell(index)中index值，也就是合并单元格的时候，index顺序发生的变化。

首先，先分析HTML中合并单元格的代码，如下图所示：

insertCell(index)中index变化规则如下：

• 如果当前行前一列（设为第一列）是合并单元格（行），首先index=0，此行后续的单元格顺序为1，2，…
• 后续合并单元格（行）所包含的行，实际是从第二列开始，但是，index是从0开始，以此后续为1，2，…

insertRow(index)中index变化规则如下：

• index=当前累计增加行数 - 当前合并单元格（行）的rowspan；
• 对应代码片段：var rownumfirst = rownum - parseInt(rowspan);

代码实现效果如下图所示：

相关简明代码如下所示：

动态合并行表单展示数据JavaScript
 
操作按钮

测试展示表单数据


 

参考：

《HTML DOM insertRow() 方法》 W3CSchool
《HTML DOM insertCell() 方法》 W3CSchool
《用于考核、评价的投票打分系统解决方案》 肖永威 2014.6
《使用JavaScript编程分析多级嵌套JSON文档数据》 肖永威 2015.11