Dynamically add colspans and/or rowspans to a table cell

by nicosa

HTML

<!-- Current look... -->
<div class="seatmap">
    <div id="plane1" class="plane"></div>
    <div id="cabin1" 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"></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>
            <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>
     ...

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;    
    clip: rect(0px,80px,102px,0px);
}
    #plane1 { top: 0px; }
    #plane2 { top: 200px; }

.cabin { 
    background-color: #dedede; 
    border: solid 1px #999;
    border-left: solid 2px #999;
    width: auto; 
    height: auto;     
    z-index: 2; 
    position: absolute;    
    padding: 5px;
}
    #cabin1 { margin-top: -99px; margin-left: 80px; top: 100px; }
    #cabin2 { margin-top: 0; margin-left: 80px; top: 200px; }

.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 = $('#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();
		}
	});
}