表上添加列跨度和行跨度上飞

我要添加合并单元格或行跨度上表中的数据表上添加列跨度和行跨度上飞

情况是这样，我有一个表说5x5的，我想通过选择发言权2列合并列用鼠标选择它们并想合并。这是很容易和M能够做到，直到这一点，但问题来的时候

table with colspan 偏黄显示合并单元格（合并）

和我尝试做一些像

Red shows what i want to merge

红色显示了我想要合并，所以最终的输出应该是所有六个单元格合并为1，并且还有许多可以看到的这种类型的其他情况。所以，请指导我继续为同一

来源

2012-02-02 Varun

你的单元格是否包含任何数据？我想你需要jQuery的功能，会自动做到这一点？当你合并单元格时，你是否总是将单元格合并到右侧和下面的单元格中，或者应该是可选的？ – Bizniztime 2012-02-02 08:52:50

问题还不清楚，如果你能够合并列和行合并6个单元时遇到了什么问题。 – Daniel 2012-02-02 09:02:07

@丹尼尔 - 我给出了一个最简单的场景，可能会出现这个问题，并且看到了一些其他问题，以及那些解释更为复杂的问题。 Bizniztime - 它需要自由流动一个人可以从最右边的单元格开始，选择直到第一个或可以合并2个单元格中的每一个从2行到1基本上应该合并一个4（2x2）的块 – Varun 2012-02-02 09:34:12

的方式，你可以像这样做，也许不是最优雅，但它的作品，我希望它为你的作品：

先用属性编制表。

function prepare() 
    { 
     var row = 0; 
     $('table tr').each(function() 
     { 
      var tr = $(this); 
      var curCol = 0; 
      var caught = $(this).data('caught'); 
      $('td', this).each(function (index) 
      { 
       while (caught && caught[curCol]) 
        curCol++; 

       var colspan = $(this).attr('colspan') || 1; 
       var rowspan = $(this).attr('rowspan'); 

       $(this).attr('start', curCol); 
       $(this).attr('end', curCol + colspan - 1); 
       $(this).attr('startrow', row); 
       $(this).attr('endrow', row + rowspan - 1); 



       var next_tr = tr.next(); 
       for (var i = 0; i < rowspan - 1; i++) 
       { 
        var curCaught = next_tr.data('caught') || []; 
        for (var j = curCol; j < curCol + colspan; j++) 
         curCaught[j] = true; 
        next_tr.data('caught', curCaught); 
        next_tr = next_tr.next(); 
       } 

       curCol += colspan; 
      }); 
      row++; 
     }) 
    }

，那么你可以调用这个函数发送它选择的tdies：

function getBoundingRectangle(tds) 
    { 
     var minCol = tds.min(function(){return $(this).attr('start');}); 
     var maxCol = tds.max(function(){return $(this).attr('end');}); 

     var minrow = tds.min(function(){return $(this).attr('startrow');}); 
     var maxrow = tds.max(function(){return $(this).attr('endrow');}); 

     var rec = $('td').filter(function() 
     { 
      var startRow = $(this).attr('startrow'); 
      var startCol = $(this).attr('start'); 

      var endRow = $(this).attr('endrow'); 
      var endCol = $(this).attr('end'); 

     return (startRow >= minrow && startRow <= maxrow && startCol >= minCol && startCol <= maxCol) || 
       (endRow >= minrow && endRow <= maxrow && endCol >= minCol && endCol <= maxCol); 
     }); 

     if (rec.length == tds.length) 
     { 
      debugger; 
      var first = rec.filter('[start=' + minCol + '][startrow=' + minrow + ']') 
      rec.not(first).remove(); 
      first.attr('colspan', maxCol - minCol + 1); 
      first.attr('rowspan', maxrow - minrow + 1); 

      return rec; 
     } 
     else return getBoundingRectangle(rec); 
    }

还添加下一个效用函数：

$.fn.max = function(func) 
    { 
     var arr = this.map(func).toArray(); 

     return Math.max.apply(Math, arr); 

    }; 

    $.fn.min = function(func) 
    { 
     var arr = this.map(func).toArray(); 

     return Math.min.apply(Math, arr); 

    };

来源

2012-02-02 14:36:38 Daniel

很高兴的努力将明天测试它。谢谢大家:) – Varun 2012-02-02 15:39:15

getBoundingRectangle中的tds是一个数组还是wat？ – Varun 2012-02-03 05:51:21

它是一个jQuery对象，它包含所有选定的tds（用户选择合并的那些），所以它们的方法如下：getBoundingRectangle（$（'。selected'）） – Daniel 2012-02-03 07:42:57

今天我写功能自动细胞行跨度的选择色谱柱

function rowspan(tableClass, rowClass) { 

var cellThis, cellPrev, spanning; 

$("." + tableClass + " ." + rowClass).each(function() { 
     cellThis = $(this); 
     spanning = 0; 

     if (cellPrev) { 
      if ($(cellPrev).html() == $(cellThis).html()) { 
       $(cellThis).remove(); 
       $(cellPrev).prop("rowspan", parseInt($(cellPrev).prop("rowspan")) + 1); 
       spanning = 1; 
      } 
     } 


     if (spanning == 0) { 
      cellPrev = $(this); 
     } 
}); 

}

有一个我的功能的例子：http://jsfiddle.net/6L25e/

来源

2014-01-20 11:59:20

表上添加列跨度和行跨度上飞

回答

相关问题