使用javascript合并表格

本文介绍了一种通过JavaScript实现的表格合并方法,可以根据优先级设置选择先进行列合并还是行合并,并提供了具体的实现代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先打源代码发上来,未整理成OO形式.

 

  /*
     *  说明:
     *      可以给表格添加priority属性,取值为数字,为1时表格列优先行合并,默认为1
     *      表格第一列为标题列,列数以第一列为基准,
     *      列合并设置 : 在列元素上添加 rowspaned 或 rowspaned='true'属性
     *      行合并设置 : 在列元素上添加 colspans=N ,N为正整数意思是最多可向右合并几列
     *                   如果整个表格中的行都要合并请设置第一列的colspans超过表格列最大值
     *                   的数,并且其它列取消colspans设置值
     * 
     */

 

  1. String.prototype.trim = function() {
  2.                 return this.replace(/(^/s*)|(/s*$)/g, ""); 
  3.             }
  4.             
  5.             function $(element) {
  6.                 if (arguments.length > 1) {
  7.                   for (var i = 0, elements = [], length = arguments.length; i < length; i++)
  8.                     elements.push($(arguments[i]));
  9.                   return elements;
  10.                 }
  11.                 if (typeof element == 'string')
  12.                   element = document.getElementById(element);
  13.                 return element;
  14.             }
  15.             
  16.             /*合并表格*/
  17.             function spantable(element) {
  18.                 element = $(element);//得到element
  19.                 if(!element) {
  20.                     return;
  21.                 }
  22.                 
  23.                 var body = element.getElementsByTagName('TBODY');
  24.                 
  25.                 if(!body) {
  26.                     body = element;
  27.                 }
  28.                 if(0==body.length) {
  29.                     return;
  30.                 }
  31.                 body = body[0];
  32.                 
  33.                 if('TBODY'!=body.tagName) {
  34.                     return;
  35.                 }
  36.                 
  37.                 var priority = parseInt(body.parentNode.priority,10);//表格合并的优先顺序,默认列优先于行的合并
  38.                 
  39.                 if(isNaN(priority)) {
  40.                     priority = 1;
  41.                 }
  42.                 
  43.                 var rows = body.childNodes;
  44.                 
  45.                 if(0==rows.length) {
  46.                     return;
  47.                 }
  48.                 
  49.                 var title = rows[0].cells;//标题行,记录每列合并的属性
  50.                 if(0==title.length) {
  51.                     return;
  52.                 }
  53.                 
  54.                 var cells , cell ,currcell , rowspan ,next ,deletecells;
  55.                 
  56.                 var row,colspans,colspan;
  57.                 
  58.                 deletecells = [];
  59.                 colspans = [];
  60.                 
  61.                 this.colspan = function(title,rows,deletecells) {//列合并函数
  62.                     var cells , cell ,currcell , rowspan ,next;
  63.                     for(var i=0;i<title.length;i++) {
  64.                         cell = title[i];
  65.                         if('undefined'==typeof cell.rowspaned) {//当前列不进行合并
  66.                             continue;
  67.                         }
  68.                         if('true'==cell.rowspaned.toString()) {
  69.                             continue;
  70.                         }
  71.                         next = true;
  72.                         for(var j=1;j<rows.length;j++) {
  73.                             currcell = rows[j].cells[i];//得到当前单元格
  74.                             if(cell==currcell) {
  75.                                 continue;
  76.                             }
  77.                             if(next) {//开始合并下一个
  78.                                 rowspan = 1;
  79.                                 next = false;
  80.                             }
  81.                             if(cell.innerText.trim()==currcell.innerText.trim()) {
  82.                                 deletecells.push(currcell);
  83.                                 rowspan ++;
  84.                             } else {
  85.                                 if(rowspan<2 && rowspan<=cell.rowSpan) {//当前设置的rowspan大于计算出出来的rowsapn
  86.                                     cell = currcell;
  87.                                 } else {
  88.                                     next = true;
  89.                                     cell.rowSpan = rowspan;
  90.                                     
  91.                                     cell = rows[j].cells[i];//移到本列的下个单元格
  92.                                 }
  93.                             }
  94.                         }
  95.                         if(rowspan>cell.rowSpan) {
  96.                             next = true;
  97.                             cell.rowSpan = rowspan;
  98.                         }
  99.                     }
  100.                 }
  101.                 
  102.                 this.rowspan = function(title,rows,deletecells) {//行合并函数
  103.                     var row,colspans,colspan,next,cell ,currcell;
  104.                     colspans = [];
  105.                     
  106.                     for(var j=0;j<title.length;j++) {
  107.                         colspan = parseInt(title[j].colspans || 0 ,10);//可合并多少行
  108.                         if(isNaN(colspan)) {
  109.                             colspan = 0;//默认不进行约束
  110.                         }
  111.                         colspans.push(Math.max(0,Math.min(title.length-j , colspan)));//向右合并多少行
  112.                          
  113.                     }
  114.                     for(var i=0;i<rows.length;i++) {
  115.                         row = rows[i];
  116.                         cell = row.cells[0];
  117.                         for(var j=0;j<colspans.length;j++) {//所有行
  118.                             if(colspans[j]>0) {
  119.                                 cell = row.cells[j];
  120.                                 next = true;
  121.                             }
  122.                             if(next) {
  123.                                 next = false;
  124.                                 colspan = 1;
  125.                             }
  126.                             
  127.                             for(var k=0;k<colspans[j];k++) {
  128.                                 currcell = row.cells[j+k];
  129.                                 if(cell==currcell) {
  130.                                     continue;
  131.                                 }
  132.                                 if(cell.innerText.trim()==currcell.innerText.trim()) {
  133.                                     deletecells.push(currcell);
  134.                                     colspan ++;
  135.                                 } else {
  136.                                      if(colspan<2 && colspan<=cell.colSpan) {//当前设置的colspan大于计算出出来的colspan
  137.                                         cell = currcell;
  138.                                     } else {
  139.                                         next = true;
  140.                                         cell.colSpan = colspan;
  141.                                         k++;  
  142.                                         if(j+k<title.length) {
  143.                                             cell = row.cells[j+k];//移到下一个单元格
  144.                                         }
  145.                                     }
  146.                                 }
  147.                             }
  148.                             
  149.                             if(colspan>cell.colSpan) {
  150.                                 cell.colSpan = colspan;
  151.                                 next = true;
  152.                             }
  153.                             
  154.                             j = j+ colspans[j];//移到到下个修改点
  155.                             if(j<colspans.length) {
  156.                                 cell = row.cells[j];
  157.                             }
  158.                         }
  159.                         
  160.                         if(colspan>cell.colSpan) {
  161.                             cell.colSpan = colspan;
  162.                             next = true;
  163.                         }
  164.                     }
  165.                 }
  166.                 
  167.                 if(1==priority) {
  168.                     this.colspan(title,rows,deletecells);
  169.                     this.rowspan(title,rows,deletecells);
  170.                 } else {
  171.                     this.rowspan(title,rows,deletecells);
  172.                     this.colspan(title,rows,deletecells);
  173.                 }
  174.                 
  175.                 for(var i in deletecells) {
  176.                     cell = deletecells[i];
  177.                     cell.parentNode.removeChild(cell);
  178.                 }
  179.                 
  180.                // alert(element.outerHTML);
  181.             }

找不到上传文件的地,只有发布到资源中了:测试页面

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值