jQuery colspan and rowspan table using cell break

转帖网上的一个合并表格单元格的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	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

 

 

 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); })