利用jquery-latest.js实现合并table多列重复行

高夜洛
2023-12-01
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="Scripts/jquery-1.8.2.min.js"></script>
    <script>
        $(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--) {
                        // fixbug console调试 
                        // 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', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 
                // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan 
                $('tbody tr', $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);
                        }
                    }
                });
            }
            // 同样是个private函数 清理内存之用 
            function dispose($table) {
                $table.removeData();
            }
            $('#process').mergeCell({
                // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 
                // 然后根据指定列来处理(合并)相同内容单元格 
                cols: [0, 1, 2, 3]
            });
        });
        //; (function ($) {
           
        //})(jQuery);

        function dd() {
            // 这里写成了一个jquery插件的形式 
            $('#process').mergeCell({
                // 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始 
                // 然后根据指定列来处理(合并)相同内容单元格 
                cols: [0,1,2,3]
            });
        }
    </script>
</head>
<body>
    <input id="Button1" type="button" value="button" οnclick="dd()" />
    <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>123</td>
                <td>SuZhouCity1</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>11111</td>
                <td>123</td>
                <td>SuZhouCity2</td>
            </tr>
              <tr>
                <td>SuZhou</td>
                <td>11111</td>
                <td>321</td>
                <td>SuZhouCity3</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>11111</td>
                <td>321</td>
                <td>SuZhouCity4</td>
            </tr>
              <tr>
                <td>SuZhou</td>
                <td>222</td>
                <td>112</td>
                <td>SuZhouCity5</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>222</td>
                <td>112</td>
                <td>SuZhouCity6</td>
            </tr>
              <tr>
                <td>SuZhou</td>
                <td>222</td>
                <td>122</td>
                <td>SuZhouCity7</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>222</td>
                <td>122</td>
                <td>SuZhouCity8</td>
            </tr>
              <tr>
                <td>SuZhou</td>
                <td>333</td>
                <td>132</td>
                <td>SuZhouCity9</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>333</td>
                <td>132</td>
                <td>SuZhouCity11</td>
            </tr>
              <tr>
                <td>SuZhou</td>
                <td>333</td>
                <td>142</td>
                <td>SuZhouCity12</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>333</td>
                <td>142</td>
                <td>SuZhouCity13</td>
            </tr>
             
           
        </tbody>
    </table>
   
</body>
</html>

 类似资料: