跪求：JS如何实现动态表格的动态列及行的合并？

1.“管辖区域：一区”所在的单元格需要进行跨三列合并，同时要进行动态跨行合并，跨多少行合并根据其后“带班”列行数，该列有三行就要进行三行合并，有四行就得进行四行合并；
2.“岗位类型”列的每个岗位类型根据该岗位类型下的岗位数进行动态跨行合并；
3.“管辖区域”及“工作区”列则根据该工作区的该管辖区域下的所有岗位数进行合并，后面有多少个岗位，进行多少行的跨行合并；
4.表格的最后三行的第一个单元格分别进行跨三列合并，第二个单元格分别进行跨5列合并

用JS或者Jquery该如何实现该表格的动态行及列合并？还请各位高人帮忙指点，小弟不胜感激！

5 个解决方案

#1

<table cellpadding="0" cellspacing="1" class="table_list_box" width="992px">
              <tr>
                <td rowspan="4" id="td_color"><div align="center">A组</div></td>
                <td colspan="3">在册人数：25</td>
                <td colspan="2" id="td_color"><div align="center">带班</div></td>
                <td id="td_color"><div align="center">电话</div></td>
                <td id="td_color"><div align="center">时段</div></td>
              </tr>
              <tr>
                <td colspan="3" rowspan="3">管辖区域：一区</td>
                <td colspan="2"><div align="center" class="STYLE1">张三</div></td>
                <td><div align="center">25875787</div></td>
                <td><div align="center">15:00-19:30</div></td>
              </tr>
              <tr>
                <td colspan="2"><div align="center" class="STYLE1">王五</div></td>
                <td><div align="center">12971579</div></td>
                <td><div align="center">15:00-19:30</div></td>
              </tr>
              <tr>
                <td colspan="2"><div align="center" class="STYLE1">李四</div></td>
                <td><div align="center">25671571</div></td>
                <td><div align="center">15:00-19:30</div></td>
              </tr>
              <tr>
                <td id="td_color"><div align="center">工作区</div></td>
                <td id="td_color"><div align="center">管辖区域</div></td>
                <td id="td_color"><div align="center">岗位类型</div></td>
                <td id="td_color"><div align="center">岗位名称</div></td>
                <td id="td_color"><div align="center">上岗时段</div></td>
                <td id="td_color"><div align="center">人员</div></td>
                <td id="td_color"><div align="center">电话</div></td>
                <td id="td_color"><div align="center">备注</div></td>
              </tr>
              <tr>
                <td rowspan="7" id="td_color"><div align="center">A区：</div></td>
                <td rowspan="7"><p align="center">aaa</p>
                  <p align="center">vcd</p>
                  <p align="center">ee</p>
                  <p align="center">dfdfsdfs</p>
                  <p align="center">fdfsdfs<br />
                  </p>                </td>
                <td rowspan="3" id="td_color01"><div align="center">固定岗</div></td>
                <td><div align="center">一级岗白班</div></td>
                <td><div align="center">07:30-12:00</div></td>
                <td><div align="center">谢一&nbsp;</div></td>
                <td><div align="center">12345678</div></td>
                <td><div align="center">&nbsp;</div></td>
              </tr>
              <tr>
                <td><div align="center">一级岗晚班</div></td>
                <td><div align="center">12:00-15:30&nbsp;</div></td>
                <td><div align="center">&nbsp;林四</div></td>
                <td><div align="center">23456789&nbsp;</div></td>
                <td><div align="center">&nbsp;</div></td>
              </tr>
              <tr>
                <td><div align="center">二级岗</div></td>
                <td><div align="center">&nbsp;15:30-21:00</div></td>
                <td><div align="center">杨六&nbsp;</div></td>
                <td><div align="center">3256789</div></td>
                <td><div align="center">&nbsp;</div></td>
              </tr>
              
              
              <tr>
                <td id="td_color01" rowspan="2"><div align="center">活动岗</div></td>
                <td><div align="center">A区白班</div></td>
                <td><div align="center">07:30-12:00&nbsp;</div></td>
                <td><div align="center">周林&nbsp;</div></td>
                <td><div align="center">26875785</div></td>
                <td><div align="center">&nbsp;</div></td>
              </tr>
              <tr>
                <td><div align="center">A区晚班</div></td>
                <td><div align="center">&nbsp;15:30-21:00&nbsp;</div></td>
                <td><div align="center">张艳兰&nbsp;</div></td>
                <td><div align="center">&nbsp;68975788</div></td>
                <td><div align="center">&nbsp;</div></td>
              </tr>
              <tr>
                <td id="td_color01" rowspan="2"><div align="center">备用岗</div></td>
                <td><div align="center">A区白班&nbsp;</div></td>
                <td><div align="center">07:30-12:00&nbsp;&nbsp;</div></td>
                <td><div align="center">兴中&nbsp;&nbsp;</div></td>
                <td><div align="center">&nbsp;35675777</div></td>
                <td><div align="center">&nbsp;</div></td>
              </tr>
              <tr>
                <td><div align="center">A区晚班&nbsp;</div></td>
                <td><div align="center">&nbsp;15:30-21:00&nbsp;</div></td>
                <td><div align="center">杨&nbsp;</div></td>
                <td><div align="center">75776&nbsp;</div></td>
                <td><div align="center">&nbsp;</div></td>
              </tr>
              <tr>
                <td colspan="3" id="td_color"><div align="center">当日实际出勤人数   </div></td>
                <td colspan="5"><div align="center">15（人）</div></td>
              </tr>
              <tr>
                <td colspan="3" id="td_color"><div align="center">休假人数</div></td>
                <td colspan="5"><div align="center">10（人）</div></td>
              </tr>
              <tr>
                <td colspan="3" id="td_color"><div align="center">备注</div></td>
                <td colspan="5"><div align="left">dfsdfsdfs</div></td>
              </tr>
            </table>

这是上面截图表格的HTML代码。

#2

请各位高手给点解决办法呢？不好实现啦

#3

建议楼主好好看看dom，table的知识。

#4

这个合并比较复杂，所以才请高人指点！

#5

帖子沉了，顶起来！