Show/Hide row in a table using checkboxes

This is a page I am working on to show all the hacking Programs for Infinity (the miniature wargame).

http://ift.tt/28UPl36

The function I'm looking for is by clicking the various checkbox under HACKING DEVICE: and UPGRADE: I want the table rows connected to them be displayed and the connecting icons for it. If I for example check "Hacking Device Plus", all the rows and programs connected to it will show up and they will all have the light green "square" show up in the Device column and if select more checkbox and more then one Hacking Device have the same row both "squares" will be shown.

If none of the checkbox are selected all the rows will be shown.

What I also want is every odd and even row to have a different colour. Now I am using this to change colour but it I can't get it to work with the solution I found here to change the active row colour (see below).

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

For the active row to change colour I tried the solution I found here. Tip://stackoverflow.com/questions/19970983/change-background-color-of-a-table-row-on-click

I have though about using the same solution to hide rows that aren't checked but after testing to just hide the css I used for odd/even colour didn't work since it could turn up the same colour next to each other when I hide the row in the middle.

Right now I am using class to show what row is connected to what hacking Device and Update.

<tr class="hdRow hdpRow">

And this is the code I use for all the squares.

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

I hope I'm more clear of what I want now then I was the last time I asked something here. =)