Add colspan and rowspan to tds with specific classes

by Bianca Kuehweidner

HTML

<div class="seatmap">
    <div class="plane"></div>
    <div class="cabin">
        
        <table>
        <tr>
            <td class="seatAvailable"></td>
            <td class="seatUnavailable"></td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatUnavailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatStorage"></td>
        </tr>
        <tr>
            <td class="seatAvailable"></td>
            <td class="seatUnavailable"></td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatUnavailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatStorage"></td>
        </tr>
        <tr>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
            <td class="noSeatGalley"></td>
        </tr>
        <tr>
            <td class="seatAvailable">A</td>
            <td class="seatAvailable">A</td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatUnavailable"></td>
            <td class="seatAvailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatLavatory"></td>
        </tr>
        <tr>
            <td class="seatAvailable"></td>
            <td class="seatAvailable"></td>
            <td class="noSeatGalley"></td>
            <td class="seatAvailableExtraPay"></td>
            <td class="seatUnavailable"></td>
            <td class="seatAvailable"></td>
            <td class="seatAvailable"></td>
        ...

CSS

body {
    font-family: Arial; 
    font-size: 11px;
}
.seatmap { 
    position: relative; 
}

.plane {
	width: 200px;
	height: 100px;
	background: #fff;
    border: solid 1px #aaa;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
    z-index: 1;
    position: absolute;    
    top: 0px;
    clip: rect(0px,80px,102px,0px);
}
.cabin { 
    background-color: #dedede; 
    border: solid 1px #999;
    border-left: solid 2px #999;
    width: auto; 
    height: auto;     
    z-index: 2; 
    position: absolute;    
    padding: 5px;
    margin-top: -99px; margin-left: 80px; top: 100px;
}

.cabin td { width: 15px; height: 15px; border: solid 1px #666; text-align: center; }
    .cabin td.seatAvailable         { background-color: aqua; }
    .cabin td.seatUnavailable       { background-color: #666; }
    .cabin td.seatAvailableExtraPay { background-color: navy; color: #fff !important; }
    .cabin td.LargeSeatAvailable    { }
    .cabin td.noSeatGalley          { border: none; width: 10px; height: 10px; background-color: transparent; }
    .cabin td.noSeatStorage         { background-color: yellow; }
    .cabin td.noSeatLavatory        { background-color: #ccc; }

JavaScript

$('.noSeatStorage').html('S');
$('.noSeatLavatory').html('L');
$('.seatAvailableExtraPay').html('E');

var planeHeight = $('.cabin').height() + 12;
$('.plane').css('height', planeHeight);
$('.plane').css('border-radius', planeHeight + '/ ' + planeHeight/2);
$('.plane').css('clip', 'rect(0px, 80px, '+planeHeight+'px, 0px)');


var i = 0;
      var $trs = $('.cabin 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]).is('.noSeatStorage, .noSeatLavatory, .seatAvailableExtraPay') == $($tds[i + 1]).is('.noSeatStorage, .noSeatLavatory, .seatAvailableExtraPay') && $($tds[i]).is('.noSeatStorage, .noSeatLavatory, .seatAvailableExtraPay')) {
                  $($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.is('.noSeatStorage, .noSeatLavatory, .seatAvailableExtraPay')) && ($tdUnder.is('.noSeatStorage, .noSeatLavatory, .seatAvailableExtraPay') == $(this).is('.noSeatStorage, .noSeatLavatory, .seatAvailableExtraPay')) && ($tdUnder.prop('colspan') == $(this).prop('colspan'))) {
                  $tdUnder.remove();
                  $(this).prop('rowspan', $(this).prop('rowspan') + 1);
              }
         ...