顯示/隱藏表格中的元素

Question

我試圖隱藏並顯示表中的整個列，具體取決於用戶是否按下了復選框。 隱藏元素很容易，但是稍后再顯示它們是一個問題。 我希望它們能完全像隱藏它們之前一樣顯示，但事實並非如此。

當我顯示元素時，它們以類似的方式顯示（請注意，它不會添加行跨度，而是顯示方式）。

編輯下表也是一個示例，並非真實表，僅用於說明目的。

<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>

我希望它以如下所示的原始方式顯示。

<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>

所以我的問題是在這種情況下應該使用什么“顯示”屬性？ 我已經測試了許多，但都不適合我的情況。

以下是JavaScript代碼。

    $("#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);
    };

和CSS類。

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

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

Answer 1

好吧，要隱藏行，請應用hide_class css類。 要再次顯示它，請不要添加show_class css類，而是刪除以前添加的hide_class css類。 另外，我建議您將css類命名為hide and show而不是hide_class和show_class 。

Answer 2

盡量不要添加.show_class ，因此您不必擔心為display屬性選擇什么值（順便說一句，我認為正確的值是table-cell ）。 只需添加或刪除.hide_class 。

嘗試這樣的事情：

$("#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

您不需要使用JS，

只需使用CSS即可完成您的任務。

CSS：

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

在這里，我給了給定的表類名.tbl 。

注意：單元格將松開邊距/填充，因為它是由table-row標簽內定義的display:table-cell標簽計算得出的。 ..

檢查工作的jsfiddle