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 `td`s? — Ken Redler, Jul 28 '10 at 04:31
I'm confused how can you select `Suse`? to the fact that it is hidden... hmmm... — Reigel Gallarde, Jul 28 '10 at 04: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, Jul 28 '10 at 04:40
once you click on the suse, it'll hide other (fedora,cent,ubuntu and redhat). — dave, Jul 28 '10 at 04:42
Refer http://stackoverflow.com/questions/12455699/show-hide-table-column-with-colspan-using-jquery for answer with colspan — LCJ, Sep 19 '12 at 05:19

Reigel Gallarde · Accepted Answer · 2010-07-28T05:34:29.307

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 '10 at 05:34

answered Jul 28 '10 at 04:52

Reigel Gallarde

64,198
21
121
139

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

OS Suse

Versions 8 9 10

Support Community Support

Thanks
– dave Jul 28 '10 at 04:55
oh?.. you want it to display as like a string? like put `OS - > Suse Versions - > 8 9 10 Support - > Community Support` below the table? – Reigel Gallarde Jul 28 '10 at 04:57
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. – dave Jul 28 '10 at 05:04
So a click on a column should generate a new table, two columns, "summarizing" the original column's data? – Ken Redler Jul 28 '10 at 05:13
Suppose there are images in one column then how can that be done ? Thanks in advance – dave Jul 28 '10 at 06:43
1

just replace `return $(this).text();` with `return $(this).html();` inside the `.map(function(){...})`... – Reigel Gallarde Jul 28 '10 at 06:53
Hello Reigel, instead of using $('#mytab tr.header td').click(function(){ I m calling my own onclick function it's working fine, but everytime it's called, TH's Data is not getting replaced. Means if OS is having Suse, after clicking of other or same column it's adding data after suse instead of replacing it with the suse. and it's happening in every row. Please help Thanks Dave – dave Jul 28 '10 at 08:51
Hello Reigel, can you tell me how to remove the data of TH on some button's click, and I'll try to solve that problem of repeating. Thanks in adcance – dave Jul 29 '10 at 04:43
Well, you could post your problem here at SO, that would be nice.. :) – Reigel Gallarde Jul 29 '10 at 04:50
Thanks Reigel, There was a glitch in my code, And now my problem is solved :) Thanks for the support – dave Jul 29 '10 at 05:06

javascript jquery show/hide of columns

1 Answers1