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

Selected how? Are there links on that first row? Behavior attached directly to the tds? — Ken Redler
– Ken Redler, Commented Jul 28, 2010 at 4:31
I'm confused how can you select Suse? to the fact that it is hidden... hmmm... — Reigel Gallarde
– Reigel Gallarde, Commented Jul 28, 2010 at 4:39
there is a javascript function so whenever somebody clicks on the fedora or suse or whatever that cell will get attached. Links are onto the second line — dave
– dave, Commented Jul 28, 2010 at 4:40
once you click on the suse, it'll hide other (fedora,cent,ubuntu and redhat). — dave
– dave, Commented Jul 28, 2010 at 4:42

Reigel Gallarde · Accepted Answer · 2010-07-28 05:34:29Z

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>';
            })
        });
    })
});

edited Jul 28, 2010 at 5:34

answered Jul 28, 2010 at 4:52

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

dave Over a year ago

Thanks Reigel for the answer but there is no problem in show/hide. There is the problem in display of Data. If something is clicked/selected then the format of display is suppose to be like this <table> <tr> <td> OS</td><td> Suse </td> </tr> <tr> <td>Versions </td> <td>8</td> <td> 9</td> <td> 10 </td> </tr> <tr> <td>Support </td> <td> Community Support </td> </tr> <table> Thanks

Reigel Gallarde Over a year ago

oh?.. you want it to display as like a string? like put OS - > Suse Versions - > 8 9 10 Support - > Community Support below the table?

dave Over a year ago

I m sorry if my words are confusing, suse's versions are listed in three different rows, 8 9 10, so whenever version is displayed, it's supposed to be on the left side, and 8 9 10 on the right hand side. (Version is currently displayed first then on the next row 8 and next row 9 and last one is 10) so all is suppose to be in one line.

Ken Redler Over a year ago

So a click on a column should generate a new table, two columns, "summarizing" the original column's data?

Reigel Gallarde Over a year ago

just replace return $(this).text(); with return $(this).html(); inside the .map(function(){...})...

|

Collectives™ on Stack Overflow

javascript jquery show/hide of columns

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related