javascript - 根据 HTML 中的类显示/隐藏行

Question

假设我有一个 HTML 格式的数据表，每一行都有，比方说，三个可能的类之一:RowA、RowB 和 RowC；代表行中的信息。 (例如，小型、中型和大型汽车)。

在表格上方，我有 3 个复选框:“显示小型汽车”、“显示中型汽车”、“显示大型汽车”。

如果用户取消选择“显示小型汽车”，则包含小型汽车的行应该消失。

我会这样做:

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">将显示所有这些。

并且无需扫描脚本中的所有行。