用jQuery合并表格中相同文本的相邻单元格

超、凢脫俗 2021-09-10 10:56 375阅读 0赞

已经生成的数据表格大致内容如下：

需要将前四列具有相同文本的相邻单元格进行自动合并，合并后如下：

1、在html的head中引入jQuery

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <script language="javascript" type="text/javascript" src="js/jquery-1.2.js"></script>

2、添加合并单元格的函数

**\[javascript\]**  [view plain][] [copy][view plain]

1.  //函数说明：合并指定表格（表格id为\_w\_table\_id）指定列（列数为\_w\_table\_colnum）的相同文本的相邻单元格  
2.  //参数说明：\_w\_table\_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ，此参数应为 \#data   
3.  //参数说明：\_w\_table\_colnum 为需要合并单元格的所在列。为数字，从最左边第一列为1开始算起。  
4.  **function** \_w\_table\_rowspan(\_w\_table\_id,\_w\_table\_colnum)\{  
5.      \_w\_table\_firsttd = "";  
6.      \_w\_table\_currenttd = "";  
7.      \_w\_table\_SpanNum = 0;  
8.      \_w\_table\_Obj = $(\_w\_table\_id + " tr td:nth-child(" + \_w\_table\_colnum + ")");  
9.      \_w\_table\_Obj.each(**function**(i)\{  
10.         **if**(i==0)\{  
11.             \_w\_table\_firsttd = $(**this**);  
12.             \_w\_table\_SpanNum = 1;  
13.         \}**else**\{  
14.             \_w\_table\_currenttd = $(**this**);  
15.             **if**(\_w\_table\_firsttd.text()==\_w\_table\_currenttd.text())\{  
16.                 \_w\_table\_SpanNum++;  
17.                 \_w\_table\_currenttd.hide(); //remove();  
18.                 \_w\_table\_firsttd.attr("rowSpan",\_w\_table\_SpanNum);  
19.             \}**else**\{  
20.                 \_w\_table\_firsttd = $(**this**);  
21.                 \_w\_table\_SpanNum = 1;  
22.             \}  
23.         \}  
24.     \});   
25. \}  
26.   
27. //函数说明：合并指定表格（表格id为\_w\_table\_id）指定行（行数为\_w\_table\_rownum）的相同文本的相邻单元格  
28. //参数说明：\_w\_table\_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ，此参数应为 \#data   
29. //参数说明：\_w\_table\_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。  
30. //          如果为数字，则从最左边第一行为1开始算起。  
31. //          "even" 表示偶数行  
32. //          "odd" 表示奇数行  
33. //          "3n+1" 表示的行数为1、4、7、10.......  
34. //参数说明：\_w\_table\_maxcolnum 为指定行中单元格对应的最大列数，列数大于这个数值的单元格将不进行比较合并。  
35. //          此参数可以为空，为空则指定行的所有单元格要进行比较合并。  
36. **function** \_w\_table\_colspan(\_w\_table\_id,\_w\_table\_rownum,\_w\_table\_maxcolnum)\{  
37.     **if**(\_w\_table\_maxcolnum == **void** 0)\{\_w\_table\_maxcolnum=0;\}  
38.     \_w\_table\_firsttd = "";  
39.     \_w\_table\_currenttd = "";  
40.     \_w\_table\_SpanNum = 0;  
41.     $(\_w\_table\_id + " tr:nth-child(" + \_w\_table\_rownum + ")").each(**function**(i)\{  
42.         \_w\_table\_Obj = $(**this**).children();  
43.         \_w\_table\_Obj.each(**function**(i)\{  
44.             **if**(i==0)\{  
45.                 \_w\_table\_firsttd = $(**this**);  
46.                 \_w\_table\_SpanNum = 1;  
47.             \}**else** **if**((\_w\_table\_maxcolnum>0)&&(i>\_w\_table\_maxcolnum))\{  
48.                 **return** "";  
49.             \}**else**\{  
50.                 \_w\_table\_currenttd = $(**this**);  
51.                 **if**(\_w\_table\_firsttd.text()==\_w\_table\_currenttd.text())\{  
52.                     \_w\_table\_SpanNum++;  
53.                     \_w\_table\_currenttd.hide(); //remove();  
54.                     \_w\_table\_firsttd.attr("colSpan",\_w\_table\_SpanNum);  
55.                 \}**else**\{  
56.                     \_w\_table\_firsttd = $(**this**);  
57.                     \_w\_table\_SpanNum = 1;  
58.                 \}  
59.             \}  
60.         \});  
61.     \});  
62. \}

3、在html的head中调用合并函数合并单元格

**\[javascript\]**  [view plain][] [copy][view plain]

1.  <script type="text/javascript">  
9.  </script>

[view plain]: http://blog.csdn.net/caojin723/article/details/3873856#