javascript jquery show/hide of columns

Question

<table id='mytab'>
    <tr>
        <td colspan="6">OS</td>
    </tr>
    <tr>
        <td></td>
        <td>Fedora</td>
        <td>Cent Os</td>
        <td>Ubuntu</td>
        <td>Suse</td>
        <td>Redhat</td>
    </tr>
    <tr>
        <td colspan="6">Versions</td>
    </tr>
    <tr>
        <td></td>
        <td>6</td>
        <td>v2.4</td>
        <td>beta 2</td>
        <td>8</td>
        <td>2008</td>
    </tr>    
    <tr>
        <td></td>
        <td>7</td>
        <td>v3.4</td>
        <td>1</td>
        <td>9</td>
        <td>2009</td>
    </tr>
    <tr>
        <td></td>
        <td>10</td>
        <td>v4.4</td>
        <td>2</td>
        <td>10</td>
        <td>2010</td>
    </tr>        
    <tr>
        <td colspan="6">Support</td>
    </tr>
    <tr>
        <td></td>
        <td>All Support Free</td>
        <td>Partial Support</td>
        <td>Paid Support</td>
        <td>Community Support</td>
        <td>Full support</td>
    </tr>
</table>

jquery

      $('#mytab td').hide();
      $('#mytab td:nth-child(1)').show();
     $('#mytab td:nth-child('whatever_column_selected')').show();

whenever whatever_column_selected, it's suppose to show the selected column, it's displaying and also displaying OS,version and support

so what I want is if suse is seleced then it's suppose to display in the following format: OS - > Suse

Versions - > 8 9 10

Support - > Community Support

If I need to replace the tables to div to get the output desired results, that'll also work

Thanks in advance

Answer 1

I have the html here with few changes..

$(function(){  
    $('#mytab tr.header td').click(function(){
        var index = $(this).index() + 1;
        $('#mytab tr td:nth-child(' + index + ')').siblings().hide();
    })
});​

---

update demo

$(function(){

    $('th').each(function(){
        var text = $(this).text();
        $(this).data('text',text);
    });
    $('#mytab tr.header td').click(function(){
        var index = $(this).index() + 1;
        $('#mytab tr:has(th)').each(function(){
            var str = $(this).nextUntil('tr:has(th)')
                .find(':nth-child('+index+')').map(function(){
                return $(this).text();
            }).get().join(" ");
            $(this).find('th').html(function(){
                return $(this).data('text') + '<span>--&gt; ' + str + '</span>';
            })
        });
    })
});​