CODEWITHSUNDEEP
jqueryhtmlcsshtml-table
JonSnow
JonSnow

Reputation: 335

Dynamically add colspans and/or rowspans to a table cell

I like to dynamically add colspans and/or rowspans to a table cell, when it contains a specific content that is the same like the one in the neighbour cell. It's allowed to be done with jQuery.

Status:

<table>
<tr>
    <td>E</td>
    <td>E</td>
</tr>
<tr>
    <td>Y</td>
    <td>W</td>
</tr>
<tr>
    <td>Y</td>
    <td>E</td>
</tr>
</table>

should look like

<table>
<tr>
    <td colspan="2">E</td>
</tr>
<tr>
    <td rowspan="2">Y</td>
    <td>W</td>
</tr>
<tr>
    <td>E</td>
</tr>
</table>

Fiddle example can be found here: http://jsfiddle.net/SchweizerSchoggi/rtcd9r4g/

First "seatmap" is current status, second one what it should look like.

Thx for any idea!!!

Upvotes: 1

Views: 8934

Answers (3)

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try below code : 

//function to check adjucent tds
var colspanCount = 1;
var validateAdjucentTd = function(adjacentTd, classOfTd){
    var $adjacentTd= $(adjacentTd);
    //check if next row td of adjacent td has same class
    var indexOfadjacentTd = $adjacentTd.index();  
    var $nextRowTdOfadjacentTd = $adjacentTd.closest('tr').next('tr').find(':nth-child('+(indexOfadjacentTd + 1)+')');          
    //mark both tds for removal
    if(classOfTd == $nextRowTdOfadjacentTd.attr('class'))
    {
        $nextRowTdOfadjacentTd.addClass('tdToRemove');
        $adjacentTd.addClass('tdToRemove');
        colspanCount++;
        var nextTd = $adjacentTd.next('td');
        if(classOfTd == $(nextTd).attr('class'))
          validateAdjucentTd(nextTd, classOfTd);  
    }
}
//iterate all Tds
    $('table tr td').each(function(){
        //reset colspan count
        colspanCount = 1;
        //check if td is not empty and not marked for removal
        if(!$(this).is(':empty') && !$(this).hasClass('tdToRemove'))
       {
           var indexOfTd = $(this).index();
           var classOfTd = $(this).attr('class');
           //get TD from next row using index of current td
           var $nextRowTd = $(this).closest('tr').next('tr').find(':nth-child('+(indexOfTd + 1)+')');
           //get adjacent td
           var $adjacentTd = $(this).next('td');
          //if class matches for next row td then mark it for removal
          if(classOfTd == $nextRowTd.attr('class'))
          {
            $nextRowTd.addClass('tdToRemove');
            $(this).data('rowspan','2');
            $(this).addClass('spanToAdd');
          }

          //if class of adjacent td matches
          if(classOfTd == $adjacentTd.attr('class'))
          {
            validateAdjucentTd($adjacentTd, classOfTd);
            if(colspanCount > 1)
              {
                $(this).data('colspan',colspanCount);
                $(this).addClass('spanToAdd');
              }
          }   
        }      
    });

   //remove all td marked for removal
   $('.tdToRemove').remove();

   //modify colspan and rowspan of the tds identified
   $('table tr td.spanToAdd').each(function(){
      var rowSpan = parseInt($(this).data('rowspan')) || 1;
      var colSpan = parseInt($(this).data('colspan')) || 1;    
      $(this).attr('rowspan',rowSpan); 
      $(this).attr('colspan',colSpan); 
   });

JSFiddle Demo

Upvotes: 1

Frederick Zhang
Frederick Zhang

Reputation: 3683

Here's the code. Attach it to the end of your JS.

var i = 0;
var $trs = $('#cabin1 tr');
$trs.each(function() {
    var $tds = $(this).find('td');
    var width = $tds.length;
    var num = 2;
    for(i = width - 2; i >= 0; i--) {
        if($($tds[i]).html() == $($tds[i + 1]).html() && $($tds[i]).html() != ""){
            $($tds[i]).attr('colspan', num);
            num++;
            $($tds[i + 1]).remove();
        } else {
            num = 2;
        }
    }
    $tds = $(this).find('td');
    width = $tds.length;
    $($tds[0]).attr('seq', 0);
    for(i = 1; i < width; i++) {
        $($tds[i]).attr('seq', parseInt($($tds[i - 1]).attr('seq')) + $($tds[i - 1]).prop('colspan'));
    }
});

var height = $trs.length;
var j = 0;

for(i = height - 2; i >= 0; i--){
    $($trs[i]).find('td').each(function() {
        var seq = parseInt($(this).attr('seq'));
        var $tdUnder = $($trs[i + 1]).find('td[seq="' + seq + '"]');
        if($tdUnder.length && ($tdUnder.html() != "") && ($tdUnder.html() == $(this).html()) && ($tdUnder.prop('colspan') == $(this).prop('colspan'))) {
            $(this).prop('rowspan', $tdUnder.prop('rowspan') + 1);
            $tdUnder.remove();
        }
    });
}

You can see the result here: http://jsfiddle.net/Frederick888/rtcd9r4g/55/

Upvotes: 2

Carlos M. Meyer
Carlos M. Meyer

Reputation: 446

With jQuery, and adding an unique id to each cell:

<table>
<tr>
    <td id="1-1">E</td>
    <td id="1-2">E</td>
</tr>
<tr>
    <td id="2-1">Y</td>
    <td id="2-2">W</td>
</tr>
<tr>
    <td id="3-1">Y</td>
    <td id="3-2">E</td>
</tr>
</table>

<script>
$("#1-1").attr("colspan","2");
$("#1-2").remove();
$("#2-1").attr("rowspan","2");
$("#3-1").remove();
</script>

Upvotes: 1

Related Questions