合并单元格功能

日常开发者经常会遇到的就是跟表格打交道，以下是一个 基于jQuery的表格合并单元格的方法

//合并单元格
; (function ($) {
    $.fn.madeRowspan = function (options) {
        var opts = $.extend({}, {
            cols: [0] //要进行合并的列 0表示第一列
        }, options);
        $.fn.madeRowspan.options = opts;
        var $table = $(this), cols = opts.cols,$targetTr = $table.children('tbody').children('tr');
        $table.data('col-content', '');     // 存放单元格内容
        $table.data('col-rowspan', 1);      // 存放计算的rowspan值 默认为1
        $table.data('col-td', $());         // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
        $table.data('trNum', $targetTr.length);     // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
        if (cols != null) {
            for (var i = cols.length - 1; cols[i] != undefined; i--) {//合并单元格
                $targetTr.each(function (index) {
                    var $tr = $(this);
                    var $td = $('td:eq(' + cols[i] + ')', $tr);
                    var currentContent = $td.html();
                    if ($table.data('col-content') == '') {
                        $table.data('col-content', currentContent);
                        $table.data('col-td', $td);
                    } else {
                        // 上一行与当前行内容相同
                        if ($.trim($table.data('col-content')) == $.trim(currentContent)) {
                            var rowspan = $table.data('col-rowspan') + 1;
                            $table.data('col-rowspan', rowspan);
                            $td.hide();
                            if (++index == $table.data('trNum')) {//table 最后一行
                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan')).show();
                            }
                        } else {
                            if ($table.data('col-rowspan') != 1) {
                                $table.data('col-td').attr('rowspan', $table.data('col-rowspan')).show();
                            }
                            // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
                            $table.data('col-td', $td);
                            $table.data('col-content', $td.html());
                            $table.data('col-rowspan', 1);
                        }
                    }
                });
            }
        }
    }
})(jQuery);

用法:

$('selector').madeRowspan() //只合并第一列
$('selector').madeRowspan({cols:[0,1]})//只合并第一列，第二列