Question

I’m making a table of games and times but I want to use javascript to show/hide part of the list. Once 5 games have been listed, all the games following that are to be encompassed within the div that will be showed/hidden by hitting a button. The trouble is, my div does not encompass ANY of the rows of the table, which is weird because the code says otherwise.

Am I not allowed to make a div that encompasses part of a table?

Thanks as always.

<table>
<?php
$result = @mysql_query('QUERY REMOVED');
$rows = mysql_num_rows($result);

$count = 0;
    if ($rows == 0) {
        echo '<h3> No games on this day </h3>';
    } else {
        while ($row = mysql_fetch_array($result)) {

        **a bunch of variable assignments**

        if($count == 5) echo '<tbody class="moreLess">';
        echo '<tr><td><a href="quotes.php?awayid=' . $awayteam_id . '&homeid=' . $hometeam_id . '&date=' . $date . '&time=' . $row['time'] . '&gameid=' . $game_id . '">' . $awayteam . ' @ ' . $hometeam . '</td><td>' . $time . '</td></a></tr>';
        $count++;               
        }
    if($count >= 6) echo '</tbody>'; 
    }
?>
</table>
<div class="moreLessSwitch"><span>More [+]</span></div>

In case you wanted it, the javascript I use (tested and working)

$(function() {     
           $(".moreLess").hide();

           $(".moreLessSwitch").toggle(function() {             
                $(this).html("<span>Less [-]</span>");            
                $(this).prevAll(".moreLess").slideDown();         
           }, function() {            
                $(this).html("<span>More [+]</span>");            
                $(this).prevAll(".moreLess").slideUp();        
           }); 

        });

The table output HTML: http://pastebin.com/raw.php?i=99iUYq6j

Answer 1

No, a div can’t exist between the table and tr tags.

However, you can (and should) use a tbody to delineate groups of tr.

Check out this fiddle.

[edit]

New fiddle.