jquery递归合并表格行

最新推荐文章于 2023-07-24 17:37:03 发布

一_梦

最新推荐文章于 2023-07-24 17:37:03 发布

阅读量299

点赞数

分类专栏： js&jquery 文章标签： jquery table

本文链接：https://blog.csdn.net/yimeng123520/article/details/86639541

版权

本文介绍如何利用jQuery实现表格中行的递归合并功能，通过示例展示具体操作步骤和效果，帮助开发者解决在表格数据展示时遇到的行合并问题。

摘要由CSDN通过智能技术生成

   /**
     * 操作表格 递归合并单元格 行
     * 2019年1月25日16:00:41

     */
    (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--) {
                for ( var i = 0; cols[i] != undefined; ++i) {
                    // fixbug console调试
                    //console.log("cols: " + cols[i]);
                    //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-row', ''); // 存放不同单元格开始行索引
            $table.data('col-rowspan', 1);  // 存放计算的rowspan值  默认为1 （总行数)
            $table.data('col-td', $());     // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
            $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用

            //行索引
            var row = 0;