Testing Dynamic Rowspan

Working Toggle Version

by blowsie

HTML

<link rel="stylesheet" href="http://www.abuilding.co.uk/css/default.css">
<table id="sched">
    <tr class="first">
        <td rowSpan="3">1st Feb</td>
        <td>System 1</td>
        <td>5</td>
    </tr>
    <tr class="data"><td colspan="2">Hello</td></tr>
    <tr>        
        <td>System 2</td>
        <td>1</td>
    </tr>
    <tr class="data"><td colspan="2">Hello</td></tr>
    <tr>       
        <td>System 3</td>
        <td>9</td>
    </tr>
    <tr class="data"><td colspan="2">Hello</td></tr>
    <tr class="first">
        <td rowSpan="3">1st Feb</td>
        <td>System 1</td>
        <td>5</td>
    </tr>
    <tr class="data"><td colspan="2">Hello</td></tr>
    <tr>        
        <td>System 2</td>
        <td>1</td>
    </tr>
    <tr class="data"><td colspan="2">Hello</td></tr>
    <tr>       
        <td>System 3</td>
        <td>9</td>
    </tr>
    <tr class="data"><td colspan="2">Hello</td></tr>
</table>

CSS

td {border:1px solid #333}

JavaScript

$('.data').hide()
$('#sched tr').not('.data').click(function() {
     if ($(this).next().is(':hidden')) {
           $(this).next().toggle()
        if ($(this).is('.first')) {
            var initspan = $(this).find('td:eq(0)').attr('rowSpan')
            $(this).find('td:eq(0)').attr('rowSpan', (initspan + 1))
        }
        else if ($(this).prev().is('.first')) {
            var initspan = $(this).prev().find('td:eq(0)').attr('rowSpan')
            $(this).prev().find('td:eq(0)').attr('rowSpan', (initspan + 1))
        }
        else {
            var initspan = $(this).prevUntil('.first').prev('.first').find('td:eq(0)').attr('rowSpan')
            $(this).prevUntil('.first').prev('.first').find('td:eq(0)').attr('rowSpan', (initspan + 1))
        }
    }
     else  {
           $(this).next().toggle()
        if ($(this).is('.first')) {
            var initspan = $(this).find('td:eq(0)').attr('rowSpan')
            $(this).find('td:eq(0)').attr('rowSpan', (initspan - 1))
        }
        else if ($(this).prev().is('.first')) {
            var initspan = $(this).prev().find('td:eq(0)').attr('rowspan')
            $(this).prev().find('td:eq(0)').attr('rowSpan', (initspan - 1))
        }
        else {
            var initspan = $(this).prevUntil('.first').prev('.first').find('td:eq(0)').attr('rowSpan')
            $(this).prevUntil('.first').prev('.first').find('td:eq(0)').attr('rowSpan', (initspan - 1))
        }
    }
});