Table内容后台循环输出时用js合并单元格

时间:2024-03-22 20:31:05

首先来回顾一下table最基础的合并单元格方法(以下内容来源于网上资源的整理)

table合并思想:当将多个内容合并时,就会有多余的东西需要删除,例如:有三列3个td,当合并时就需要删除2个。合并单元格,就是删除多余td。

推出一个合并删除td的公式:删除的个数=合并的个数-1

合并列用:colspan="列数"

合并行用:rowspan="行数"


1、基本表格


Table内容后台循环输出时用js合并单元格

2、表格合并列

Table内容后台循环输出时用js合并单元格

3、表格合并行

Table内容后台循环输出时用js合并单元格

4、复杂表格

Table内容后台循环输出时用js合并单元格


看到上述图片应该很清晰的了,也很简单。但是像我这样逻辑不强的人,经常会把行和列的合并混淆,遇到庞大表格数量时完全就懵了o(╥﹏╥)o, 而且在实际工作中table里的内容大部分是循环输出的,那么遇到这样的情况如何去进行合并呢……

针对上述痛点,经过查阅资料发现一个大神写好的JS,简单套用就能轻松搞定。

Table内容后台循环输出时用js合并单元格


使用方法1、引入上图js内容

                     2、调用该方法(如下图)

Table内容后台循环输出时用js合并单元格

很方便吧,快来试一试!