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

使用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. functiontable_rowspan(table_id,table_colnum)
9. {
10. if(table_colnum=="even"){
11. table_colnum="2n";
12. }
13. elseif(table_colnum=="odd"){
14. table_colnum="2n+1";
15. }
16. else{
17. table_colnum=""+table_colnum;
18. }
19. varcols=[];
20. varall_row_num=$(table_id+"trtd:nth-child(1)").length;
21. varall_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. varn=0;
27. vara=table_colnum.substring(0,table_colnum.indexOf("n"));
28. varb=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. vartable_minrow=arguments[2]?arguments[2]:0;
39. vartable_maxrow=arguments[3]?arguments[3]:all_row_num+1;
40. vartable_firsttd="";
41. vartable_currenttd="";
42. vartable_SpanNum=0;
43. for(varj=0;j $(table_id+"trtd:nth-child("+cols[j]+")").slice(table_minrow,table_maxrow).each(function(i){
44. vartable_col_obj=$(this);
45. if(table_col_obj.html()!=""){
46. if(i==0){
47. table_firsttd=$(this);
48. table_SpanNum=1;
49. }
50. else{
51. table_currenttd=$(this);
52. if(table_firsttd.text()==table_currenttd.text()){
53. table_SpanNum++;
54. table_currenttd.hide();//remove();
55. table_firsttd.attr("rowSpan",table_SpanNum);
56. }else{
57. table_firsttd=$(this);
58. table_SpanNum=1;
59. }
60. }
61. }
62. });
63. }
64. }
65.  
66. /**
67. *desc:合并指定表格（表格id为table_id）指定行（行数为table_rownum）的相同文本的相邻单元格
68. *@table_id表格id:为需要进行合并单元格的表格的id。如在HTMl中指定表格id="data"，此参数应为#data
69. *@table_rownum:为需要合并单元格的所在行.参考jQuery中nth-child的参数.若为数字，从最左边第一列为1开始算起;"even"表示偶数行;"odd"表示奇数行;"3n+1"表示的行数为1、4、7、......
70. *@table_mincolnum?:可选的,表示要合并行中的最小列,省略表示从第0列开始(闭区间)
71. *@table_maxcolnum?:可选的,表示要合并行中的最大列,省略表示表格的最大列数(开区间)
72. */
73. functiontable_colspan(table_id,table_rownum){
74. //if(table_maxcolnum==void0){table_maxcolnum=0;}
75. vartable_mincolnum=arguments[2]?arguments[2]:0;
76. vartable_maxcolnum;
77. vartable_firsttd="";
78. vartable_currenttd="";
79. vartable_SpanNum=0;
80. $(table_id+"tr:nth-child("+table_rownum+")").each(function(i){
81. table_row_obj=$(this).children();
82. table_maxcolnum=arguments[3]?arguments[3]:table_row_obj.length;
83. table_row_obj.slice(table_mincolnum,table_maxcolnum).each(function(i){
84. if(i==0){
85. table_firsttd=$(this);
86. table_SpanNum=1;
87. }elseif((table_maxcolnum>0)&&(i>table_maxcolnum)){
88. return"";
89. }else{
90. table_currenttd=$(this);
91. if(table_firsttd.text()==table_currenttd.text()){
92. table_SpanNum++;
93. if(table_currenttd.is(":visible")){
94. table_firsttd.width(parseInt(table_firsttd.width())+parseInt(table_currenttd.width()));
95. }
96. table_currenttd.hide();//remove();
97. table_firsttd.attr("colSpan",table_SpanNum);
98. }else{
99. table_firsttd=$(this);
100. table_SpanNum=1;
101. }
102. }
103. });

});

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