Able to have div encompass part of table?_问答_开发者

Able to have div encompass part of table?

开发者 https://www.devze.com 2023-03-21 04:52 出处：网络

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

相关专题：php

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

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.

tbody is correct way to define group of rows...

This test code works for me:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../jquery/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".moreLess").hide();

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

<table>
<?php

$rows = array(array(1,2,3),array(1,2,3),array(1,2,3),array(1,2,3),array(1,2,3),array(1,2,3),array(1,2,3),array(1,2,3),array(1,2,3),array(1,2,3));

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

        //**a bunch of variable assignments**

        if($count == 5) echo '<tbody class="moreLess">' . "\r\n";
        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>' . "\r\n";
        $count++;               
        }
    if($count >= 6) echo "</tbody>\r\n\r\n"; 
    }
?>
</table>
<div class="moreLessSwitch"><span>More [+]</span></div>

</body>
</html>

Your HTML is invalid. A <div> cannot occur inside a <table> unless inside a <td> cell, while yours spans several <tr> rows. A better solution would be to assign the .moreLess class to the table rows: