html中隐藏显示出来,在HTML中基于类显示/隐藏行

实际上，显示和隐藏行的基础知识可以在CSS中非常干净地完成。 Javascript只需要告诉周围的表它应该显示什么类型 - 这只是设置类名的问题。

如果这是您的HTML：

NameTypePrice

FalconLarge$160.00CommodoreLarge$160.00CamryMedium$110.00LancerMedium$105.00PriusSmall$75.00CivicSmall$80.00

使用此CSS：

/* The rows to show */

table.showTypeA .rowA,

table.showTypeB .rowB,

table.showTypeC .rowC {

display: table-row;

}

/* Then, hide the other types */

table.showTypeA .rowB,

table.showTypeA .rowC,

table.showTypeB .rowA,

table.showTypeB .rowC,

table.showTypeC .rowA,

table.showTypeC .rowB {

display: none;

}

你需要用javascript做的就是在'showTypeA'，'showTypeB'，'showTypeC'的表格上设置一个类，浏览器将负责其余的工作。