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

来源：互联网发布：剑灵灵族男捏脸数据吧编辑：程序博客网时间：2024/06/01 22:27
<!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" onclick="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>
0 0