Question

这是我正在努力展示无限黑客程序（微型战争游戏）的页面。

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

我正在寻找的功能是单击HACKING DEVICE下的各种复选框：并升级：我希望显示连接到它们的表行以及它的连接图标。例如，如果我检查＆＃34; Hacking Device Plus＆＃34;，那么连接到它的所有行和程序都将显示出来，并且它们都将具有浅绿色＆＃34; square＆＃34;显示在“设备”列中，如果选择更多复选框和更多，则一个黑客设备具有相同的行＆＃34; square＆＃34;将会出现。

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

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

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>

使用复选框

1 个答案: