使用javascript合并表格_表格合并javascript-优快云博客

本文链接：https://blog.youkuaiyun.com/skynice/article/details/3040551
本文介绍了一种通过JavaScript实现的表格合并方法，可以根据优先级设置选择先进行列合并还是行合并，并提供了具体的实现代码。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
先打源代码发上来,未整理成OO形式.
/*
     * 说明:
     *      可以给表格添加priority属性,取值为数字,为1时表格列优先行合并,默认为1
     *      表格第一列为标题列,列数以第一列为基准,
     *      列合并设置 : 在列元素上添加 rowspaned 或 rowspaned='true'属性
     *      行合并设置 : 在列元素上添加 colspans=N ,N为正整数意思是最多可向右合并几列
     *                   如果整个表格中的行都要合并请设置第一列的colspans超过表格列最大值
     *                   的数,并且其它列取消colspans设置值
     *
     */
 
 String.prototype.trim = function() {
                return this.replace(/(^/s*)|(/s*$)/g, ""); 
            }
            
            function $(element) {
                if (arguments.length > 1) {
                  for (var i = 0, elements = [], length = arguments.length; i < length; i++)
                    elements.push($(arguments[i]));
                  return elements;
                }
                if (typeof element == 'string')
                  element = document.getElementById(element);
                return element;
            }
            
            /*合并表格*/
            function spantable(element) {
                element = $(element);//得到element 
                if(!element) {
                    return;
                }
                
                var body = element.getElementsByTagName('TBODY');
                
                if(!body) {
                    body = element;
                }
                if(0==body.length) {
                    return;
                }
                body = body[0];
                
                if('TBODY'!=body.tagName) {
                    return;
                }
                
                var priority = parseInt(body.parentNode.priority,10);//表格合并的优先顺序,默认列优先于行的合并 
                
                if(isNaN(priority)) {
                    priority = 1;
                }
                
                var rows = body.childNodes;
                
                if(0==rows.length) {
                    return;
                }
                
                var title = rows[0].cells;//标题行,记录每列合并的属性 
                if(0==title.length) {
                    return;
                }
                
                var cells , cell ,currcell , rowspan ,next ,deletecells;
                
                var row,colspans,colspan;
                
                deletecells = [];
                colspans = [];
                
                this.colspan = function(title,rows,deletecells) {//列合并函数 
                    var cells , cell ,currcell , rowspan ,next;
                    for(var i=0;i<title.length;i++) {
                        cell = title[i];
                        if('undefined'==typeof cell.rowspaned) {//当前列不进行合并 
                            continue;
                        }
                        if('true'==cell.rowspaned.toString()) {
                            continue;
                        }
                        next = true;
                        for(var j=1;j<rows.length;j++) {
                            currcell = rows[j].cells[i];//得到当前单元格 
                            if(cell==currcell) {
                                continue;
                            }
                            if(next) {//开始合并下一个 
                                rowspan = 1;
                                next = false;
                            }
                            if(cell.innerText.trim()==currcell.innerText.trim()) {
                                deletecells.push(currcell);
                                rowspan ++;
                            } else {
                                if(rowspan<2 && rowspan<=cell.rowSpan) {//当前设置的rowspan大于计算出出来的rowsapn 
                                    cell = currcell;
                                } else {
                                    next = true;
                                    cell.rowSpan = rowspan;
                                    
                                    cell = rows[j].cells[i];//移到本列的下个单元格 
                                }
                            }
                        }
                        if(rowspan>cell.rowSpan) {
                            next = true;
                            cell.rowSpan = rowspan;
                        }
                    }
                }
                
                this.rowspan = function(title,rows,deletecells) {//行合并函数 
                    var row,colspans,colspan,next,cell ,currcell;
                    colspans = [];
                    
                    for(var j=0;j<title.length;j++) {
                        colspan = parseInt(title[j].colspans || 0 ,10);//可合并多少行 
                        if(isNaN(colspan)) {
                            colspan = 0;//默认不进行约束 
                        }
                        colspans.push(Math.max(0,Math.min(title.length-j , colspan)));//向右合并多少行 
                         
                    }
                    for(var i=0;i<rows.length;i++) {
                        row = rows[i];
                        cell = row.cells[0];
                        for(var j=0;j<colspans.length;j++) {//所有行 
                            if(colspans[j]>0) {
                                cell = row.cells[j];
                                next = true;
                            }
                            if(next) {
                                next = false;
                                colspan = 1;
                            }
                            
                            for(var k=0;k<colspans[j];k++) {
                                currcell = row.cells[j+k];
                                if(cell==currcell) {
                                    continue;
                                }
                                if(cell.innerText.trim()==currcell.innerText.trim()) {
                                    deletecells.push(currcell);
                                    colspan ++;
                                } else {
                                     if(colspan<2 && colspan<=cell.colSpan) {//当前设置的colspan大于计算出出来的colspan 
                                        cell = currcell;
                                    } else {
                                        next = true;
                                        cell.colSpan = colspan;
                                        k++;  
                                        if(j+k<title.length) {
                                            cell = row.cells[j+k];//移到下一个单元格 
                                        }
                                    }
                                }
                            }
                            
                            if(colspan>cell.colSpan) {
                                cell.colSpan = colspan;
                                next = true;
                            }
                            
                            j = j+ colspans[j];//移到到下个修改点 
                            if(j<colspans.length) {
                                cell = row.cells[j];
                            }
                        }
                        
                        if(colspan>cell.colSpan) {
                            cell.colSpan = colspan;
                            next = true;
                        }
                    }
                }
                
                if(1==priority) {
                    this.colspan(title,rows,deletecells);
                    this.rowspan(title,rows,deletecells);
                } else {
                    this.rowspan(title,rows,deletecells);
                    this.colspan(title,rows,deletecells);
                }
                
                for(var i in deletecells) {
                    cell = deletecells[i];
                    cell.parentNode.removeChild(cell);
                }
                
               // alert(element.outerHTML); 
            }