jQuery colspan and rowspan table using cell break

最新推荐文章于 2022-10-11 16:01:48 发布

caojin723

最新推荐文章于 2022-10-11 16:01:48 发布

阅读量2.9k

点赞数

分类专栏： jQuery 文章标签： jquery table function action null

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用jQuery实现表格单元格合并的方法。通过自定义jQuery的rowspan和colspan函数，可以轻松地对表格进行行列合并操作。文章提供了详细的代码示例。

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

转帖网上的一个合并表格单元格的jQuery代码。其中可以学习将合并函数新增为jQuery的方法、将需要合并的左侧单元格采用TH标签等。

原文标题：jQuery colspan and rowspan table using cell break

原文地址：http://willifirulais.blogspot.com/2007/07/jquery-table-column-break.html

原表格：

x	x	x	hx1	hx1	hx1
x	x	x	hxx1	hxx2	hxx3
hy1	hyy1	hy1	a1	2	3
hy1	hyy2	hy1	1.1	2.1	3.1
hy1	hyy3	hy1	4	5	6
hy2	hyy3	hy1	7	8	9
hy2	hyy3	hy1	10	11	12
hy2	hyy3	hy1	13	14	15
hy3	hyy3	hy2	1	2	3
hy3	hyy3	hy2	1	2	3
hy2	hyy3	hy1	1	2	3
hy2	hyy3	hy1	1	2	3
hy3	hyy3	hy2	1	2	3
hy3	hyy3	hy2	1	2	3

运行函数合并单元格后的表格：

x			x	x	hx1			hx1	hx1
x			x			x	x	hxx1	hxx2	hxx3
hy1	hyy1	hy1	a1	2	3
	hy1		hyy2	hy1	1.1	2.1	3.1
	hy1		hyy3	hy1	4	5	6
hy2	hyy3			hy1	7	8	9
	hy2			hyy3	hy1	10	11	12
	hy2			hyy3	hy1	13	14	15
hy3	hyy3	hy2		1	2	3
hy3	hy3	hy2		hyy3	hy2	1	2	3
hy2	hyy3	hy1		1	2	3
hy2	hy2	hy1		hyy3	hy1	1	2	3
hy3	hyy3	hy2		1	2	3
hy3	hy3	hy2		hyy3	hy2	1	2	3

1、新增jQuery合并单元格方法

jQuery.fn.rowspan = function(colIdx) { return this.each(function(){ var that; $('tr', this).each(function(row) { $('th:eq('+colIdx+')', this).filter(':visible').each(function(col) { if ($(this).html() == $(that).html()) { rowspan = $(that).attr("rowSpan"); if (rowspan == undefined) { $(that).attr("rowSpan",1); rowspan = $(that).attr("rowSpan"); } rowspan = Number(rowspan)+1; $(that).attr("rowSpan",rowspan); // do your action for the colspan cell here $(this).hide(); // .remove(); // do your action for the old cell here } else { that = this; } that = (that == null) ? this : that; // set the that if not already set }); }); }); } jQuery.fn.colspan = function(rowIdx) { return this.each(function(){ var that; $('tr', this).filter(":eq("+rowIdx+")").each(function(row) { $(this).find('th').filter(':visible').each(function(col) { if ($(this).html() == $(that).html()) { colspan = $(that).attr("colSpan"); if (colspan == undefined) { $(that).attr("colSpan",1); colspan = $(that).attr("colSpan"); } colspan = Number(colspan)+1; $(that).attr("colSpan",colspan); $(this).hide(); // .remove(); } else { that = this; } that = (that == null) ? this : that; // set the that if not already set }); }); }); }

2、使用以上合并单元格方法

$("#table1").rowspan(0); $("#table1").rowspan(1); $("#table1").rowspan(2); $('table tbody tr:visible').each(function(row) { $('#table1').colspan(row); })