本文实例讲述了jQuery实现HTML表格单元格合并的方法。分享给大家供大家参考，具体如下：
运行效果截图如下：
合并前：
合并后：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> /** * 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行开始 (闭区间) * @table_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)").length; var all_col_num = $(table_id + " tr:nth-child(1)").children().length; if (table_colnum.indexOf("n") == -1) { cols[0] = 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 ? parseInt(a) : 1; b = b ? parseInt(b) : 0; //alert(b); while (a * n + b <= all_col_num) { cols[n] = a * n + b; n++; } } var table_minrow = arguments[2] ? arguments[2] : 0; var table_maxrow = arguments[3] ? arguments[3] : all_row_num + 1; var table_firsttd = ""; var table_currenttd = ""; var table_SpanNum = 0; for (var j = 0; j < cols.length; j++) { $(table_id + " tr td:nth-child(" + cols[j] + ")").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_currenttd.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_rownum : 为需要合并单元格的所在行.参考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_maxcolnum=0;} var table_mincolnum = arguments[2] ? arguments[2] : 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 = arguments[3] ? arguments[3] : table_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 (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="table1"> <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"> <input type="button" value="合并表格1"> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。