使用复选框显示/隐藏表格中的行

Question

这是我正在制作的一个页面，用于展示 Infinity 的所有黑客程序（微型战争游戏）。

http://wargames.malgol.se/infinity/hacking/

我正在寻找的功能是通过单击 HACKING DEVICE: 和 UPGRADE: 下的各种复选框来显示连接到它们的表行以及它的连接图标。例如，如果我选中“Hacking Device Plus”，则连接到它的所有行和程序都会显示出来，并且它们都会在“设备”列中显示浅绿色的“正方形”，如果选择更多复选框和一个以上的黑客设备有同一行的两个“正方形”都会显示。

如果未选中任何复选框，则将显示所有行。

我还希望每个奇数行和偶数行都有不同的颜色。现在我正在使用它来更改颜色，但我无法使用我在此处找到的解决方案来更改活动行颜色（见下文）。

table#hackingTable tr:nth-child(odd) td {background:#303030;color:#F7F7F7;}
table#hackingTable tr:nth-child(even) td {background:#404040;color:#F7F7F7;}

对于更改颜色的活动行，我尝试了我在此处找到的解决方案。 Tip://stackoverflow.com/questions/19970983/change-background-color-of-a-table-row-on-click

虽然我有关于使用相同的解决方案来隐藏未检查的行，但在测试后只隐藏我用于奇数/偶数颜色的 css 不起作用，因为它可以在彼此旁边显示相同的颜色当我隐藏在中间的行时。

现在我正在使用类来显示哪一行连接到什么黑客设备和更新。

<tr class="hdRow hdpRow">

这是我用于所有方块的代码。

    <td>
        <div class="cube hdCube"></div>
        <div class="cube hdpCube"></div>
    </td>

我希望我现在更清楚我想要什么，而不是我最后一次在这里问什么。 =)

Answer 1

这是一个开始

请注意，输入需要在标记中的标签和表格之前才能使用其checked 状态

table {
  border-collapse: collapse;
}
tbody tr {
  background: #eee;
  border-bottom: 1px solid #fff;
}
tr, td {
  padding: 10px;
}
input,
tbody tr {
  display: none;
}
label {
  display: inline-block;
  padding: 6px;
}
label:after {
  content: '\00a0';
  text-align: center;
  display: inline-block;
  border: 1px solid;
  width: 20px;
  margin-left: 5px;
}

#inp1:checked ~ table label[for="inp1"]:after,
#inp2:checked ~ table label[for="inp2"]:after,
#inp3:checked ~ table label[for="inp3"]:after {
  content: 'v';
}
#inp1:checked ~ table .nr1,
#inp2:checked ~ table .nr2,
#inp3:checked ~ table .nr3 {
  display: table-row;
}

<input id="inp1" type="checkbox">
<input id="inp2" type="checkbox" checked="checked">
<input id="inp3" type="checkbox">

<table>
  <thead>
    <tr colspan="3">
      <td>
        <label for="inp1">Toggle 1</label>
        <label for="inp2">Toggle 2</label>
        <label for="inp3">Toggle 3</label>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr class="nr1">
      <td><div>Row 1</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr class="nr2">
      <td><div>Row 2</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
    <tr class="nr3">
      <td><div>Row 3</div></td>
      <td><div>...</div></td>
      <td><div>...</div></td>
    </tr>
  </tbody>
</table>