使用复选框的 table 行中的 Show/Hide 行

Question

这是我正在处理的页面，用于显示 Infinity（微型战争游戏）的所有黑客程序。

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

我正在寻找的功能是单击 HACKING DEVICE: 和 UPGRADE 下的各种复选框：我希望显示连接到它们的 table 行及其连接图标。例如，如果我选中 "Hacking Device Plus"，所有连接到它的行和程序都会显示出来，它们都会在“设备”列中显示浅绿色 "square"，如果 select 更多复选框并且不止一个黑客设备在同一行都将显示 "squares"。

如果复选框的 none 被 select 选中，将显示所有行。

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

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

为了改变活动行的颜色，我尝试了我在这里找到的解决方案。 Tip://whosebug.com/questions/19970983/change-background-color-of-a-table-row-on-click

我曾考虑过使用相同的解决方案来隐藏未选中的行，但在测试后只隐藏了我用于 odd/even 颜色的 css 不起作用，因为它可以转动当我隐藏中间的行时，彼此相邻的相同颜色。

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

<tr class="hdRow hdpRow">

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

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

我希望我现在比上次在这里问问题更清楚我想要什么。 =)

Answer 1

这是一个开始

请注意，输入需要在标签和标记中的 table 之前才能使用其 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: '[=10=]a0';
  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>

使用复选框的 table 行中的 Show/Hide 行

Show/Hide row in a table using checkboxes

css

checkbox

jquery

show-hide

tablerow