Show/Hide elements in a table

Question

I'm trying to hide and show an entire column in a table depending on if a user has pressed a checkbox or not. Hiding the elements is easy, but showing them again later is a problem. I want them to be displayed exactly as they were before I hide them but thats not the case.

When I show the elements They are shown in a similar fashion (note that it doesn't add the rowspan, but thats how its displayed).

Edit Also the below table is an example and is not the real table, its just for explaining purpose.

<TABLE BORDER=2 CELLPADDING=4>
<TR>
    <TH ROWSPAN=6 BGCOLOR="#99CCFF">Production</TH>
    <TD>Raha Mutisya</TD> 
    </TR>
<TR>
    <TD>Shalom Buraka</TD> 
    </TR>
<TR>
    <TD>Brandy Davis</TD>
    </TR>
<TR>
    <TD>Claire Horne</TD> 
    </TR>
<TR>
    <TD>Bruce Eckel</TD> 
    </TR>
<TR>
    <TD>Danny Zeman</TD> 
    </TR>
</TABLE>

And I want it to show in its original fashion like below.

<TABLE BORDER=2 CELLPADDING=4>
<TR>
    <TH BGCOLOR="#99CCFF">Production</TH>

    <TD>Raha Mutisya</TD> 


    <TD>Shalom Buraka</TD> 

    <TD>Brandy Davis</TD>

    <TD>Claire Horne</TD> 

    <TD>Bruce Eckel</TD> 

    <TD>Danny Zeman</TD> 
    </TR>
</TABLE>

So my question is what "display" property should I use in this case? I have tested many of them but none suited my situation.

Below is the javascript code.

    $("#officialCheckBox").click(function() {
        if(this.checked && dataCol.Official ==="False"){
            table.setBodyColumnCss(column + 1, "hide_class");
        }
        else{
            table.setBodyColumnCss(column,"show_class");
        }              
    });

table.setBodyColumnCss(column,"show_class");

    this.setBodyColumnCss = function(col,css){
        col_css[col] = css;
        this.table_body.find("td[col=" +col+ "]").addClass(css);
    };

And the css classes.

.hide_class{
    display: none;
}
.show_class{
    display: inherit;
}

http://www.w3schools.com/cssref/pr_class_display.asp

possible duplicate of [Change an element's CSS class with JavaScript](http://stackoverflow.com/questions/195951/change-an-elements-css-class-with-javascript) — Bud Damyanov, Jul 31 '14 at 08:44

score 2 · Accepted Answer · answered Jul 31 '14 at 08:28

2

Okay, to hide a row, apply the hide_class css class. To reshow it again, don't add the show_class css class, instead, remove the previously added hide_class css class. Also, I suggest you name your css classes hide and show rather than hide_class and show_class.

answered Jul 31 '14 at 08:28

Chris Walsh

3,423
2
42
62

It was so simple, I feel so stupid. Many thanks. Will accept your answer in 4 mins. – anders Jul 31 '14 at 08:33

score 0 · Answer 2 · answered Jul 31 '14 at 08:31

Try not to add .show_class, so you don't have to worry about what value to chose for the display property (by the way, I think that the right value it's table-cell). Simply add or remove .hide_class.

Try something like this:

$("#officialCheckBox").click(function(){
    if(this.checked && dataCol.Official ==="False"){
        table.hideBodyColumn(column + 1);
    }
    else{
        table.showBodyColumn(column);
    }              
});

this.hideBodyColumn = function(col){
    this.table_body.find("td[col=" +col+ "]").addClass('hide_class');
};
this.showBodyColumn = function(col){
    this.table_body.find("td[col=" +col+ "]").removeClass('hide_class');
};

score 0 · Answer 3 · answered Jul 31 '14 at 09:28

You need not use and JS,

Just Use CSS and your task is achieved..

CSS:

table.tbl{
    display:table;
}
table.tbl tr td{
    display:table-row;
}

Here I have given class name .tbl to the given table.

Note: The Cell will loose the margin/padding as it is calculated by display:table-cell tag defined inside the table-row tag. ..

Check the working jsfiddle

Show/Hide elements in a table

3 Answers3