第一次遇到页面单元格要在页面加载完成后，做单元格合并的功能，记录一下。
<script type="text/javascript">
(function($) { $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols;for ( var i = cols.length - 1; cols[i] != undefined; i--) { mergeCell($(this), cols[i]); }dispose($(this));});};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', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用//我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan$('tbody tr', $table).each(function(index) { //var $td = $('td:eq(' + colIndex + ')', this);//取出单元格的当前内容var currentContent = $td.attr("id");//第一次时走此分支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设置rowspanif (++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.attr("id"));$table.data('col-rowspan', 1);};};}); }//同样是个private函数 清理内存之用
function dispose($table) { $table.removeData(); };})(jQuery);$('#process').mergeCell({
//目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 //然后根据指定列来处理(合并)相同内容单元格 cols: [0,9]});</script>
测试小程序(转)
<!DOCTYPE html>
<html><head><title></title><script src="jquery-1.7.1.min.js" type="text/javascript"></script></head><body><table id="process" cellpadding="2" cellspacing="0" border="1"> <thead> <tr > <td>col0</td> <td>col1</td> <td>col2</td> <td>col3</td> </tr> </thead> <tbody> <tr> <td>SuZhou</td> <td>11111</td> <td>22222</td> <td>SuZhouCity</td> </tr> <tr> <td>SuZhou</td> <td>33333</td> <td>44444</td> <td>SuZhouCity</td> </tr> <tr> <td>SuZhou</td> <td>55555</td> <td>66666</td> <td>SuZhouCity</td> </tr> <tr> <td>ShangHai</td> <td>77777</td> <td>88888</td> <td>ShangHaiCity</td> </tr> <tr> <td>ShangHai</td> <td>uuuuu</td> <td>hhhhh</td> <td>ShangHaiCity</td> </tr> <tr> <td>ShangHai</td> <td>ggggg</td> <td>ccccc</td> <td>ShangHaiCity</td> </tr> <tr> <td>GuangZhou</td> <td>ttttt</td> <td>eeeee</td> <td>GuangZhouCity</td> </tr> <tr> <td>GuangZhou</td> <td>ppppp</td> <td>qqqqq</td> <td>GuangZhouCity</td> </tr> </tbody> </table></body></html> <script type="text/javascript">(function($) { $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols;for ( var i = cols.length - 1; cols[i] != undefined; i--) { mergeCell($(this), cols[i]); }dispose($(this));});};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', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用//我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan$('tbody tr', $table).each(function(index) { //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设置rowspanif (++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);};};}); }//同样是个private函数 清理内存之用
function dispose($table) { $table.removeData(); };})(jQuery);$('#process').mergeCell({
//目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 //然后根据指定列来处理(合并)相同内容单元格 cols: [0, 3]});</script>