在HTML中基于类显示/隐藏行

Question

想象一下,我在HTML中有一个数据表,每个行都有三个可能的类之一:RowA,RowB和RowC; 它代表行中的信息.(例如,小型,中型和大型车).

在桌子上方,我有3个复选框:"Show Small Cars","Show Medium Cars","Show Large Cars".

如果用户取消选择"显示小型汽车",则包含小型汽车的行应该消失.

我就是这样做的:

function showHideRows(classToShowOrHide, checkBoxSender)
{
  var tableObj = document.getElementById("myDataTable");

  for (i = 0; i < tableObj.childNodes.length; i++)
    if (tableObj.childNodes[i].className == classToShowOrHide)
      tableObj.childNodes[i].style.display = checkBoxSender.checked ? "visible" : "none";
}

有没有更好的办法？例如,我可以使用javascript修改css类来包含/排除display: none吗？

我没有使用jQuery.

Answer 1

如果您将标记/样式定义为:

<table class="showSmallCars showMediumCars">
  <tr class="smallCar">...<tr>
  <tr class="mediumCar">...<tr>
</table>

CSS:
table tr { display:none; }
table.showSmallCars tr.smallCar { display:table-row; }
table.showMediumCars tr.mediumCar { display:table-row; }

那么你就足以修改表中的类属性来呈现你需要的组的记录:这样<table class="showSmallCars showMediumCars">就会显示小的媒介并<table class="showSmallCars showMediumCars showLargeCars">显示所有这些.

而且无需扫描脚本中的所有行.