合并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 |
效果出来, 看上去比较简单, 下面先看下页面
1 <table cellpadding="2" cellspacing="0" > 2 <thead> 3 <tr > 4 <td>col0</td> 5 <td>col1</td> 6 <td>col2</td> 7 <td>col3</td> 8 </tr> 9 </thead> 10 <tbody> 11 <tr> 12 <td>SuZhou</td> 13 <td>11111</td> 14 <td>22222</td> 15 <td>SuZhouCity</td> 16 </tr> 17 <tr> 18 <td>SuZhou</td> 19 <td>33333</td> 20 <td>44444</td> 21 <td>SuZhouCity</td> 22 </tr> 23 <tr> 24 <td>SuZhou</td> 25 <td>55555</td> 26 <td>66666</td> 27 <td>SuZhouCity</td> 28 </tr> 29 <tr> 30 <td>ShangHai</td> 31 <td>77777</td> 32 <td>88888</td> 33 <td>ShangHaiCity</td> 34 </tr> 35 <tr> 36 <td>ShangHai</td> 37 <td>uuuuu</td> 38 <td>hhhhh</td> 39 <td>ShangHaiCity</td> 40 </tr> 41 <tr> 42 <td>ShangHai</td> 43 <td>ggggg</td> 44 <td>ccccc</td> 45 <td>ShangHaiCity</td> 46 </tr> 47 <tr> 48 <td>GuangZhou</td> 49 <td>ttttt</td> 50 <td>eeeee</td> 51 <td>GuangZhouCity</td> 52 </tr> 53 <tr> 54 <td>GuangZhou</td> 55 <td>ppppp</td> 56 <td>qqqqq</td> 57 <td>GuangZhouCity</td> 58 </tr> 59 </tbody> 60 </table>
1 // 这里写成了一个jquery插件的形式
2 $('#process').mergeCell({
3 // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
4 // 然后根据指定列来处理(合并)相同内容单元格
5 cols: [0, 3]
6 });下面看看这个小插件的完整代码:
1 <table >
2 <thead>
3 <tr >
4 <td>col0</td>
5 <td>col1</td>
6 <td>col2</td>
7 <td>col3</td>
8 </tr>
9 </thead>
10 <tbody>
11 <tr>
12 <td>SuZhou</td>
13 <td>11111</td>
14 <td>22222</td>
15 <td>SuZhouCity</td>
16 </tr>
17 <tr>
18 <td>SuZhou</td>
19 <td>33333</td>
20 <td>44444</td>
21 <td>SuZhouCity</td>
22 </tr>
23 <tr>
24 <td>SuZhou</td>
25 <td>55555</td>
26 <td>66666</td>
27 <td>SuZhouCity</td>
28 </tr>
29 <tr>
30 <td>ShangHai</td>
31 <td>77777</td>
32 <td>88888</td>
33 <td>ShangHaiCity</td>
34 </tr>
35 <tr>
36 <td>ShangHai</td>
37 <td>uuuuu</td>
38 <td>hhhhh</td>
39 <td>ShangHaiCity</td>
40 </tr>
41 <tr>
42 <td>ShangHai</td>
43 <td>ggggg</td>
44 <td>ccccc</td>
45 <td>ShangHaiCity</td>
46 </tr>
47 <tr>
48 <td>GuangZhou</td>
49 <td>ttttt</td>
50 <td>eeeee</td>
51 <td>GuangZhouCity</td>
52 </tr>
53 <tr>
54 <td>GuangZhou</td>
55 <td>ppppp</td>
56 <td>qqqqq</td>
57 <td>GuangZhouCity</td>
58 </tr>
59 </tbody>
60 </table>
61
62
63 ;(function($) {
64 // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
65 // 才保留了jQuery.prototype这个形式
66 $.fn.mergeCell = function(options) {
67 return this.each(function() {
68 var cols = options.cols;
69 for ( var i = cols.length - 1; cols[i] != undefined; i--) {
70 // fixbug console调试
71 // console.debug(cols[i]);
72 mergeCell($(this), cols[i]);
73 }
74 dispose($(this));
75 });
76 };
77 // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
78 // 具体可以参考本人前一篇随笔里介绍的那本书
79 function mergeCell($table, colIndex) {
80
81 $table.data('col-content', ''); // 存放单元格内容
82 $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
83 $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
84 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
85
86 // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
87 $('tbody tr', $table).each(function(index) {
88 // td:eq中的colIndex即列索引
89 var $td = $('td:eq(' + colIndex + ')', this);
90
91 // 取出单元格的当前内容
92 var currentContent = $td.html();
93
94 // 第一次时走此分支
95 if ($table.data('col-content') == '') {
96
97 $table.data('col-content', currentContent);
98 $table.data('col-td', $td);
99
100 } else {
101 // 上一行与当前行内容相同
102 if ($table.data('col-content') == currentContent) {
103 // 上一行与当前行内容相同则col-rowspan累加, 保存新值
104 var rowspan = $table.data('col-rowspan') + 1;
105 $table.data('col-rowspan', rowspan);
106 // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
107 $td.hide();
108
109 // 最后一行的情况比较特殊一点
110 // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
111 if (++index == $table.data('trNum'))
112 $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
113
114 } else { // 上一行与当前行内容不同
115 // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
116 if ($table.data('col-rowspan') != 1) {
117 $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
118 }
119 // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
120 $table.data('col-td', $td);
121 $table.data('col-content', $td.html());
122 $table.data('col-rowspan', 1);
123 }
124 }
125 });
126 }
127
128 // 同样是个private函数 清理内存之用
129 function dispose($table) {
130 $table.removeData();
131 }
132 })(jQuery);主要的说明在注释里应该都有了, 代码的确比较简单, 像有些地方还值得改进
处理的table内容是从tbody开始查找的, 如果没有tbody, 那应该给出个更通用化的方案
for ( var i = cols.length - 1; cols[i] != undefined; i--)...如果表格数据量大, 处理的列也比较多, 这里不进行优化会有造成浏览器线程阻塞的风险, 可以考虑用setTimeout
其他什么值得改进的, 我想应该会不少的
