Question

我正在尝试隐藏并在表格中显示整个列，具体取决于用户是否按下了复选框。隐藏元素很容易，但稍后再次显示它们是一个问题。我希望它们能够像我隐藏它们之前那样完全显示，但事实并非如此。

当我显示元素时它们以类似的方式显示（请注意，它不会添加rowspan，但这就是它的显示方式）。

修改下面的表格也是一个例子而不是真正的表格，仅用于解释目的。

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

Answer 2

尽量不要添加.show_class，因此您不必担心为显示属性选择什么值（顺便说一下，我认为正确的值是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。

注意：单元格会松开边距/填充，因为它是由display:table-cell标记内定义的table-row标记计算的。 ..

检查工作jsfiddle

显示/隐藏表格中的元素

3 个答案: