利用jquery实现合并多列重复行

最新推荐文章于 2021-05-31 14:47:54 发布
「已注销」
最新推荐文章于 2021-05-31 14:47:54 发布
阅读量881
点赞数
    <!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>