使用JQuery实现HTML表格的单元格合并

1. /** 
2.     * desc : 合并指定表格（表格id为table_id）指定列（列数为table_colnum）的相同文本的相邻单元格   
3.     * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data    
4.     * @table_colnum   : 为需要合并单元格的所在列.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数列;"odd" 表示奇数列; "3n+1" 表示的列数为1、4、7、......  
5.     * @table_minrow ? : 可选的,表示要合并列的行数最小的列,省略表示从第0行开始 (闭区间)  
6.     * @table_maxrow ? : 可选的,表示要合并列的行数最大的列,省略表示最大行列数为表格最后一行 (开区间)  
7.     */  
8.     function table_rowspan(table_id,table_colnum)  
9.     {  
10.         if(table_colnum=="even"){  
11.         table_colnum = "2n";  
12.         }  
13.         else if(table_colnum=="odd"){  
14.         table_colnum = "2n+1";  
15.         }  
16.         else{  
17.         table_colnum = ""+table_colnum;  
18.         }  
19.         var cols=[];  
20.         var all_row_num = $(table_id+" tr td:nth-child(1)").length;  
21.         var all_col_num = $(table_id+" tr:nth-child(1)").children().length;  
22.         if(table_colnum.indexOf("n")==-1){  
23.         cols[0] = table_colnum;  
24.         }  
25.         else{  
26.         var n = 0;  
27.         var a = table_colnum.substring(0,table_colnum.indexOf("n") );  
28.         var b= table_colnum.substring(table_colnum.indexOf("n")+1);  
29.         //alert("a="+a+"b="+(b==true));  
30.         a = a?parseInt(a):1;  
31.         b = b?parseInt(b):0;  
32.         //alert(b);  
33.         while(a*n+b<=all_col_num){  
34.             cols[n] = a*n+b;  
35.             n++;  
36.         }  
37.         }  
38.         var table_minrow = arguments[2]?arguments[2]:0;  
39.         var table_maxrow = arguments[3]?arguments[3]:all_row_num+1;      
40.         var table_firsttd = "";    
41.         var table_currenttd = "";    
42.         var table_SpanNum = 0;  
43.         for(var j=0;j<cols.length;j++){  
44.             $(table_id + " tr td:nth-child(" + cols[j] + ")").slice(table_minrow, table_maxrow).each(function (i) {  
45.                 var table_col_obj = $(this);  
46.                 if (table_col_obj.html() != " ") {  
47.                     if (i == 0) {  
48.                         table_firsttd = $(this);  
49.                         table_SpanNum = 1;  
50.                     }  
51.                     else {  
52.                         table_currenttd = $(this);  
53.                         if (table_firsttd.text() == table_currenttd.text()) {  
54.                             table_SpanNum++;  
55.                             table_currenttd.hide(); //remove();    
56.                             table_firsttd.attr("rowSpan", table_SpanNum);  
57.                         } else {  
58.                             table_firsttd = $(this);  
59.                             table_SpanNum = 1;  
60.                         }  
61.                     }  
62.                 }  
63.             });  
64.         }  
65.     }  
66.    
67.     /** 
68.     * desc : 合并指定表格（表格id为table_id）指定行（行数为table_rownum）的相同文本的相邻单元格     
69.     * @table_id 表格id : 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 #data    
70.     * @table_rownum   : 为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even" 表示偶数行;"odd" 表示奇数行; "3n+1" 表示的行数为1、4、7、......  
71.     * @table_mincolnum ? : 可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间) 
72.     * @table_maxcolnum ? : 可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间)  
73.     */    
74.    function table_colspan(table_id,table_rownum){    
75.         //if(table_maxcolnum == void 0){table_maxcolnum=0;}  
76.         var table_mincolnum = arguments[2]?arguments[2]:0;  
77.         var table_maxcolnum;  
78.         var table_firsttd = "";    
79.         var table_currenttd = "";    
80.         var table_SpanNum = 0;    
81.         $(table_id + " tr:nth-child(" + table_rownum + ")").each(function(i){    
82.             table_row_obj = $(this).children();  
83.             table_maxcolnum = arguments[3]?arguments[3]:table_row_obj.length;    
84.             table_row_obj.slice(table_mincolnum,table_maxcolnum).each(function(i){    
85.                 if(i==0){    
86.                     table_firsttd = $(this);    
87.                     table_SpanNum = 1;    
88.                 }else if((table_maxcolnum>0)&&(i>table_maxcolnum)){    
89.                     return "";    
90.                 }else{    
91.                     table_currenttd = $(this);    
92.                     if(table_firsttd.text()==table_currenttd.text()){    
93.                         table_SpanNum++;   
94.                         if(table_currenttd.is(":visible")){  
95.                             table_firsttd.width(parseInt(table_firsttd.width())+ parseInt(table_currenttd.width()));  
96.                                 }     
97.                         table_currenttd.hide(); //remove();    
98.                         table_firsttd.attr("colSpan",table_SpanNum);  
99.                     }else{    
100.                         table_firsttd = $(this);    
101.                         table_SpanNum = 1;    
102.                     }    
103.                 }    
104.             });    
105.         });    

1.     }  

           调用

1. <script type="text/javascript">  
2.                 $(document).ready(function () {  
3.                     table_rowspan("#shaitu", 2);  
4.                     table_rowspan("#shaitu", 3);  
5.                     table_rowspan("#shaitu", 4);  
6.                 });  
7. </script>