javascript - 显示/隐藏表格中的元素

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 和 show 而不是 hide_class 和 show_class。