Javascript 显示/隐藏表中的元素

我试图根据用户是否按下复选框隐藏和显示表中的整个列。隐藏元素很容易，但稍后再次显示它们是一个问题。我希望它们能像我隐藏它们之前一样显示出来，但事实并非如此

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

编辑 此外，下表是一个示例，不是真实的表，只是为了说明目的

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

还有css类

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

---

好的，要隐藏行，请应用

hide\u类

css类。要重新显示，请不要添加

show\u类

css类，而是删除先前添加的

hide\u类

css类。

---

另外，我建议您将css类命名为

hide

和

show

，而不是

hide\u class

和

show\u class

，尽量不要添加

。show\u class

，这样您就不必担心为display属性选择什么值（顺便说一句，我认为正确的值是

表单元格

）。只需添加或删除

。隐藏类

试着这样做：

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

---

您不需要使用和JS

只要使用CSS，您的任务就完成了

CSS:

在这里，我为给定的表指定了类名

.tbl

注意：单元格将失去边距/填充，因为它是由

display:table Cell

table行中定义的标记

计算的

检查工作
太简单了，我觉得自己太笨了。非常感谢。我会在4分钟内接受你的答案。可能的副本你能添加一个草图，看看它前后的样子吗？
.hide_class{
    display: none;
}
.show_class{
    display: inherit;
}

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

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