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

本文介绍了HTML中table单元格的基本合并方法,包括行合并(rowspan)与列合并(colspan)的具体应用,并提供了一种简便的JavaScript实现方案,帮助开发者轻松处理复杂的表格数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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

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

合并列用:colspan="列数"

合并行用:rowspan="行数"


1、基本表格


2、表格合并列


3、表格合并行

4、复杂表格



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

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



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

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


很方便吧,快来试一试!




评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值