本文實例講述了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" onClick="table_colspan('#table1',1)"> <input type="button" value="合并表格1" onClick="table_rowspan('#table1',1)"> </body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
