Testing Dynamic Rowspan

by Sudipto_Sarker

HTML

<table id="sched">
    <tr class="first">
        <td rowspan="3">1st Feb</td>
        <td>System 1</td>
        <td>5</td>
    </tr>
    <tr>        
        <td>System 2</td>
        <td>1</td>
    </tr>
    <tr>       
        <td>System 3</td>
        <td>9</td>
    </tr>
    <tr class="first">
        <td rowspan="3">2st Feb</td>
        <td>System 1</td>
        <td>5</td>
    </tr>
    <tr>        
        <td>System 2</td>
        <td>1</td>
    </tr>
    <tr>       
        <td>System 3</td>
        <td>9</td>
    </tr>
</table>

CSS

td{border: 1px solid #666}

JavaScript

$('#sched tr').not('.data').click(function() {
    $(this).after("<tr class='data'><td>Hello</td><td class='close'>X</td></tr>")

    if ($(this).is('.first')) {
        var initspan = $(this).find('td[rowspan]').attr('rowspan')
        $(this).find('td[rowspan]').attr('rowspan', (initspan + 1))
    }
    else if ($(this).prev().is('.first')) {
        var initspan = $(this).prev().find('td[rowspan]').attr('rowspan')
        $(this).prev().find('td[rowspan]').attr('rowspan', (initspan + 1))
    }
    else {
        var initspan = $(this).prevUntil('.first').prev().find('td[rowspan]').attr('rowspan')
        $(this).prevUntil('.first').prev().find('td[rowspan]').attr('rowspan', (initspan + 1))
    }
});

$(".close").live('click', function() {
    $(this).parent().hide();
    if ($(this).is('.first')) {
        var initspan = $(this).parent().find('td[rowspan]').attr('rowspan')
        $(this).parent().find('td[rowspan]').attr('rowspan', (initspan - 1))
    }
    else if ($(this).prev().is('.first')) {
        var initspan = $(this).parent().prev().find('td[rowspan]').attr('rowspan')
        $(this).parent().prev().find('td[rowspan]').attr('rowspan', (initspan - 1))
    }
    else {
        var initspan = $(this).parent().prevUntil('.first').prev().find('td[rowspan]').attr('rowspan')
        $(this).parent().prevUntil('.first').prev().find('td[rowspan]').attr('rowspan', (initspan - 1))
    }

});