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

Question

这是一个页面，我正在工作，以显示所有的黑客程序为无限(微型战争游戏)。

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

我要寻找的功能是点击黑客设备下的各种复选框:并升级:我希望显示连接到它们的表行，并显示它的连接图标。例如，如果我选中“”，连接到它的所有行和程序都会显示，它们都会在设备列中显示浅绿色的“方块”，如果选择更多的复选框，并且多个黑客设备有相同的行，则会显示两个“方块”。

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

我还想要的是每一行奇数和偶数行都有不同的颜色。现在我用它来改变颜色，但是我不能让它与我在这里找到的改变活动行颜色的解决方案一起工作(见下面)。

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>

​