Aggiungi colspan e rowspan sul tavolo al volo

Question

voglio aggiungere colspan o rowspan su dati della tabella

La situazione è come se avessi un tavolo di dire 5x5, voglio unire le colonne selezionando diciamo 2 colonne da selezionandoli con il mouse e vuoi unirli. Questo è facile e m in grado di fare fino a questo ma problema arriva quando

spettacoli gialli colspan (fusa)

e cerco di fare qualcosa di simile

rossa mostra quello che ho voglio unire così l'output finale dovrebbe essere tutte le sei celle unite in 1 e ci sono molti altri casi di questo tipo che possono essere visti. Quindi, per favore mi guida il modo di procedere per la stessa

Answer 1

Si può fare in questo modo, forse non il più elegante ma funziona, spero che funziona per voi:

prima preparare la tavola con gli attributi.

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++; 
     }) 
    } 

allora si può chiamare questa funzione di inviarlo i tdies selezionati:

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); 
    } 

aggiungono anche i prossimi funzioni di utilità:

$.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); 

    }; 

Answer 2

Oggi funzione per cella automaticamente rowspan per selezionato ho scritto colonne

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); 
     } 
}); 

} 

C'è un esempio della mia funzione: http://jsfiddle.net/6L25e/