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

Answer 1

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 .

Answer 2

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

Answer 3

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