切换多个表行

I got this table, used for menu and submenu items. It's a combination of PHP (to read the menu items and per menu item all submenu items) and HTML.

What I need is to find a way to toggle visibility on only the submenu items of main menu item.

I've tried lots of stuff with javascript and jQuery (getelementbyID, byName, byClassname ) but it all doesn't seem to work.. (perhaps it's so simple that I'm making it diffcult..)

What I do is I get the mainmenu item per row in the DB table, ordered by order number. While posting the table row with content, I query the submenu DB table for the submenu items.

I post the submenu items as additional normal TR lines, so it's no separate table or anything, just a new TR.

For both while loops, I run a counter so I can use that as a reference number.

I set the display to 'none' on those submenu items, but I'm not sure where to go from there.

ex:

<table>

<!-- column text //-->
<tr>
    <th>1st var</th><th>2nd var</th><th>3rd var</th>
</tr>

<!-- mainmenu item //-->
<tr>
    <td>1st var</td><td>2nd var</td><td>3rd var</td>
</tr>

<!-- submenu item //-->
<tr>
    <td>1st var</td><td>2nd var</td><td>3rd var</td>
</tr>

<!-- next mainmenu item //-->
<tr>
    <td>1st var</td><td>2nd var</td><td>3rd var</td>
</tr>


<!-- and so on //-->

If I get it what are you asking then it can be solve with CSS alone. You need class for submenu that hides all submenues and you need class for menues that will on hover change next sibling table cell display property (so next row).

So when you hover first row it will change next row TD elements (initially they have display set to none). You need to set hover style for submenu row as well to table-cell if you dont wana your submenu row disapear after you move on it.

table{
   width: 100%; 
    border: solid 1px #ccc;
}
th{background: #eee;}
.submenu>td{display: none; color: red;}
.menu:hover + .submenu>td{display: table-cell;}
.submenu:hover>td{display: table-cell;}

<table cellspacing="0" cellpadding="0">
    <tr>
        <th>1st var</th><th>2nd var</th><th>3rd var</th>
    </tr>
    <tr class="menu">
        <td>Menu A1</td><td>Menu A2</td><td>Menu A3</td>
    </tr>
    <tr class="submenu">
        <td>Submenu A1</td><td>Submenu A2</td><td>Submenu A3</td>
    </tr>
    <tr class="menu">
        <td>Menu B1</td><td>Menu B2</td><td>Menu B3</td>
    </tr>
    <tr class="submenu">
        <td>Submenu B1</td><td>Submenu B2</td><td>Submenu B3</td>
    </tr>
</table>

</div>