Thêm colspan và rowspan trên bàn một cách nhanh chóng

Question

Tôi muốn thêm colspan hoặc rowspan trên bảng dữ liệu

Tình hình là như tôi có một bảng nói 5x5, tôi muốn kết hợp cột bằng cách chọn nói 2 cột bằng chọn chúng bằng chuột và muốn hợp nhất. Đây là dễ dàng và m có thể làm đến này, nhưng vấn đề đến khi

chương vàng colspan (sáp nhập)

và tôi cố gắng để làm một cái gì đó giống như

đỏ cho thấy những gì tôi muốn hợp nhất để đầu ra cuối cùng nên được tất cả sáu tế bào sáp nhập thành 1 và có rất nhiều trường hợp khác của loại này có thể được nhìn thấy. Vì vậy, xin vui lòng hướng dẫn cho tôi cách để tiến hành cho cùng

Answer 1

Bạn có thể làm điều đó như thế này, có lẽ không phải là thanh lịch nhất nhưng nó hoạt động, tôi hy vọng nó làm việc cho bạn:

đầu tiên chuẩn bị bảng với các thuộc tính.

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

sau đó bạn có thể gọi chức năng này gửi nó trở thành tdies chọn:

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

cũng thêm các chức năng tiện ích tiếp theo:

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

Hôm nay tôi đã viết chức năng để tự động di rowspan cho chọn cột

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ó một ví dụ về chức năng của tôi: http://jsfiddle.net/6L25e/