《jQuery实现HTML表格单元格的合并功能_.docx》由会员分享，可在线阅读，更多相关《jQuery实现HTML表格单元格的合并功能_.docx（13页珍藏版）》请在三一文库上搜索。
1、jQuery实现HTML表格单元格的合并功能_ 本文实例讲解并描述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考，具体如下： 运行效果截图如下： 具体代码如下： !DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Transitional/EN l1/DTD/xhtml1-transitional.dtd html xmlns=l head title/title script src=jquery-1.4.1.min.js type=text/javascript/script script type=text/javascript /*
2、* desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格 * table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id=data ，此参数应为 #data * table_colnum : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开头算起;even 表示偶数列;odd 表示奇数列; 3n+1 表示的列数为1、4、7、. * table_minrow ? : 可选的,表示要合并列的行数最小的列,省略表示从第0行开头 (闭区间) * ta
3、ble_maxrow ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最终一行 (开区间) */ function table_rowspan(table_id, table_colnum) if (table_colnum = even) table_colnum = 2n; else if (table_colnum = odd) table_colnum = 2n+1; else table_colnum = + table_colnum; var cols = ; var all_row_num = $(table_id + tr td:nth-child(1).l
4、ength; var all_col_num = $(table_id + tr:nth-child(1).children().length; if (table_colnum.indexOf(n) = -1) cols0 = table_colnum; else var n = 0; var a = table_colnum.substring(0, table_colnum.indexOf(n); var b = table_colnum.substring(table_colnum.indexOf(n) + 1); /alert(a=+a+b=+(b=true); a = a ? pa
5、rseInt(a) : 1; b = b ? parseInt(b) : 0; /alert(b); while (a * n + b = all_col_num) colsn = a * n + b; n+; var table_minrow = arguments2 ? arguments2 : 0; var table_maxrow = arguments3 ? arguments3 : all_row_num + 1; var table_firsttd = ; var table_currenttd = ; var table_SpanNum = 0; for (var j = 0;
6、 j cols.length; j+) $(table_id + tr td:nth-child( + colsj + ).slice(table_minrow, table_maxrow).each(function (i) var table_col_obj = $(this); if (table_col_obj.html() != ) if (i = 0) table_firsttd = $(this); table_SpanNum = 1; else table_currenttd = $(this); if (table_firsttd.text() = table_current
7、td.text() table_SpanNum+; table_currenttd.hide(); /remove(); table_firsttd.attr(rowSpan, table_SpanNum); else table_firsttd = $(this); table_SpanNum = 1; ); /* * desc : 合并指定表格（表格id为table_id）指定行（行数为table_rownum）的相同文本的相邻单元格 * table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id=data ，此参数应为 #data * table_ro
8、wnum : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开头算起;even 表示偶数行;odd 表示奇数行; 3n+1 表示的行数为1、4、7、. * table_mincolnum ? : 可选的,表示要合并行中的最小列,省略表示从第0列开头(闭区间) * table_maxcolnum ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间) */ function table_colspan(table_id, table_rownum) /if(table_maxcolnum = void 0)table_maxc
9、olnum=0; var table_mincolnum = arguments2 ? arguments2 : 0; var table_maxcolnum; var table_firsttd = ; var table_currenttd = ; var table_SpanNum = 0; $(table_id + tr:nth-child( + table_rownum + ).each(function (i) table_row_obj = $(this).children(); table_maxcolnum = arguments3 ? arguments3 : table_
10、row_obj.length; table_row_obj.slice(table_mincolnum, table_maxcolnum).each(function (i) if (i = 0) table_firsttd = $(this); table_SpanNum = 1; else if (table_maxcolnum 0) (i table_maxcolnum) return ; else table_currenttd = $(this); if (table_firsttd.text() = table_currenttd.text() table_SpanNum+; if
11、 (table_currenttd.is(:visible) table_firsttd.width(parseInt(table_firsttd.width() + parseInt(table_currenttd.width(); table_currenttd.hide(); /remove(); table_firsttd.attr(colSpan, table_SpanNum); else table_firsttd = $(this); table_SpanNum = 1; ); ); /script /head body table width=400 border=1 id=t
12、able1 tr td align=center a /td td for /td td for /td td 100 /td td 200 /td td 200 /td /tr tr td a /td td for /td td for /td td 150 /td td 230 /td td 200 /td /tr tr td dd /td td if /td td for /td td 100 /td td 200 /td td 200 /td /tr tr td aa /td td if /td td for /td td 300 /td td 240 /td td 200 /td /tr tr td e /td td if /td td for /td td 320 /td td 230 /td td 200 /td /tr /table input type=button value=合并表格2 onClick=table_colspan(#table1,1) input type=button value=合并表格1 onClick=table_rowspan(#table1,1) /body /html 盼望本文所述对大家jQuery程序设计有所关心。 .