合并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 id="process" cellpadding="2" cellspacing="0" border="1"> 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 id="process" cellpadding="2" cellspacing="0" border="1"> 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
-
其他什么值得改进的, 我想应该会不少的