用jQuery合并表格中相同文本的相邻单元格.docx
《用jQuery合并表格中相同文本的相邻单元格.docx》由会员分享，可在线阅读，更多相关《用jQuery合并表格中相同文本的相邻单元格.docx（14页珍藏版）》请在冰豆网上搜索。
用jQuery合并表格中相同文本的相邻单元格
ONE
已经生成的数据表格大致内容如下：
地区
地区
商品代码
商品名称
数量
有效期至
距效期（月）
产品批号
规格
单位
条形码
广东
深圳
00028
红花油
广东
深圳
00028
红花油
广东
深圳
00028
红花油
广东
广州
00027
白花油
广东
广州
00028
红花油
广东
深圳
00028
红花油
广东
深圳
00028
红花油
广东
深圳
00028
红花油
广东
深圳
00028
红花油
需要将前四列具有相同文本的相邻单元格进行自动合并，合并后如下：
地区
地区
商品代码
商品名称
数量
有效期至
距效期（月）
产品批号
规格
单位
条形码
广东
深圳
00028
红花油
广州
00027
白花油
00028
红花油
深圳
1、在html的head中引入jQuery
2、添加合并单元格的函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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+ "trtd:
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==void0）{_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中调用合并函数合并单元格
1
2
3
4
5
6
7
8
9
1.--
2. $（document）.ready（function（）{
3. _w_table_rowspan（"#spdata",4）;
4. _w_table_rowspan（"#spdata",3）;
5. _w_table_rowspan（"#spdata",2）;
6. _w_table_rowspan（"#spdata",1）;
7. }）;
8. //-->
9.
TWO
合并table相同单元格的jquery插件（很精简）
正好项目中有个小需求,要求把表格指定列中内容相同的单元格进行合并,本质上涉及的就是td的rowspan属性,数出含相同内容单元格的个数,然后给第一个与上一行内容不同的td其rowspan属性附上正确的值即可,为了能直观的理解,效果如下
原表格:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
SuZhou
33333
44444
SuZhouCity
SuZhou
55555
66666
SuZhouCity
ShangHai
77777
88888
ShangHaiCity
ShangHai
uuuuu
hhhhh
ShangHaiCity
ShangHai
ggggg
ccccc
ShangHaiCity
GuangZhou
ttttt
eeeee
GuangZhouCity
GuangZhou
ppppp
qqqqq
GuangZhouCity
处理之后的样子:
col0
col1
col2
col3
SuZhou
11111
22222
SuZhouCity
33333
44444
55555
66666
ShangHai
77777
88888
ShangHaiCity
uuuuu
hhhhh
ggggg
ccccc
GuangZhou
ttttt
eeeee
GuangZhouCity
ppppp
qqqqq
效果出来,看上去比较简单,下面先看下页面
02
03
04
col0 | 05
col1 | 06
col2 | 07
col3 | 08
09
10
11
12
SuZhou | 13
11111 | 14
22222 | 15
SuZhouCity | 16
17
18
SuZhou | 19
33333 | 20
44444 | 21
SuZhouCity | 22
23
24
SuZhou | 25
55555 | 26
66666 | 27
SuZhouCity | 28
29
30
ShangHai | 31
77777 | 32
88888 | 33
ShangHaiCity | 34
35
36
ShangHai | 37
uuuuu | 38
hhhhh | 39
ShangHaiCity | 40
41
42
ShangHai | 43
ggggg | 44
ccccc | 45
ShangHaiCity | 46
47
48
GuangZhou | 49
ttttt | 50
eeeee | 51
GuangZhouCity | 52
53
54
GuangZhou | 55
ppppp | 56
qqqqq | 57
GuangZhouCity | 58
59
60
//这里写成了一个jquery插件的形式
2
$（'#process'）.mergeCell（{
3
//目前只有cols这么一个配置项,用数组表示列的索引,从0开始
4
//然后根据指定列来处理（合并）相同内容单元格
5
cols:
[0,3]
6
}）;
下面看看这个小插件的完整代码:
;（function（$）{
//看过jquery源码就可以发现$.fn就是$.prototype,只是为了兼容早期版本的插件
//才保留了jQuery.prototype这个形式
$.fn.mergeCell=function（options）{
return this.each（function（）{
var cols=options.cols;
for （var i=cols.length-1;cols[i]!
=undefined;i--）{
//fixbugconsole调试
//console.debug（cols[i]）;
mergeCell（$（this）,cols[i]）;
}
dispose（$（this））;
}）;
};
//如果对javascript的closure和scope概念比较清楚,这是个插件内部使用的private方法
//具体可以参考本人前一篇随笔里介绍的那本书
function mergeCell（$table,colIndex）{
$table.data（'col-content',''）;//存放单元格内容
$table.data（'col-rowspan',1）; //存放计算的rowspan值 默认为1
$table.data（'col-td',$（））; //存放发现的第一个与前一行比较结果不同td（jQuery封装过的）,默认一个"空"的jquery对象
$table.data（'trNum',$（'tbodytr',$table）.length）;//要处理表格的总行数,用于最后一行做特殊处理时进行判断之用
//我们对每一行数据进行"扫面"处理关键是定位col-td,和其对应的rowspan
$（'tbodytr',$table）.each（function（index）{
//td:
eq中的colIndex即列索引
var $td=$（'td:
eq（' +colIndex+'）',this）;
//取出单元格的当前内容
var currentContent=$td.html（）;
//第一次时走此分支
if （$table.data（'col-content'）==''）{
$table.data（'col-content',currentContent）;
$table.data（'col-td',$td）;
}else {
//上一行与当前行内容相同
if （$table.data（'col-content'）==currentContent）{
//上一行与当前行内容相同则col-rowspan累加,保存新值
var rowspan=$table.data（'col-rowspan'）+1;
$table.data（'col-rowspan',rowspan）;
//值得注意的是 如果用了$td.remove（）就会对其他列的处理造成影响
$td.hide（）;
//最后一行的情况比较特殊一点
//比如最后2行td中的内容是一样的,那么到最后一行就应该把此时的col-td里保存的td设置rowspan
if （++index==$table.data（'trNum'））
$table.data（'col-td'）.attr（'rowspan',$table.data（'col-rowspan'））;
}else {//上一行与当前行内容不同
//col-rowspan默认为1,如果统计出的col-rowspan没有变化,不处理
if （$table.data（'col-rowspan'）!
=1）{
$table.data（'col-td'）.attr（'rowspan',$table.data（'col-rowspan'））;
}
//保存第一次出现不同内容的td,和其内容,重置col-rowspan
$table.data（'col-td',$td）;
$table.data（'col-content',$td.html（））;
$table.data（'col-rowspan',1）;
}
}
}）;
}
升级会员 