jQuery colspan and rowspan table using cell break

来源：互联网发布：淘宝海报图片男装编辑：程序博客网时间：2024/06/06 05:14

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

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

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

原表格：

xxxhx1hx1hx1xxxhxx1hxx2hxx3hy1hyy1hy1a123hy1hyy2hy11.12.13.1hy1hyy3hy1456hy2hyy3hy1789hy2hyy3hy1101112hy2hyy3hy1131415hy3hyy3hy2123hy3hyy3hy2123hy2hyy3hy1123hy2hyy3hy1123hy3hyy3hy2123hy3hyy3hy2123

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

xxxhx1hx1hx1xxxhxx1hxx2hxx3hy1hyy1hy1a123hy1hyy2hy11.12.13.1hy1hyy3hy1456hy2hyy3hy1789hy2hyy3hy1101112hy2hyy3hy1131415hy3hyy3hy2123hy3hyy3hy2123hy2hyy3hy1123hy2hyy3hy1123hy3hyy3hy2123hy3hyy3hy2123

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