Question

我正在制作游戏和时间表，但我想使用javascript来显示/隐藏部分列表。一旦列出了5个游戏，之后的所有游戏都将被包含在将通过按钮显示/隐藏的div中。问题是，我的div不包含表中的任何行，这很奇怪，因为代码说不然。

我不允许制作包含表格一部分的div吗？

一如既往地谢谢。

<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>

如果你想要它，我使用的javascript（测试和工作）

$(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();        
           }); 

        });

表输出HTML：http://pastebin.com/raw.php?i=99iUYq6j

Answer 1

不，div和table代码之间不能存在tr。

但是，您可以（并且应该）使用tbody来描述tr组。

查看this fiddle。

<强> [编辑]

New fiddle

Answer 2

tbody是定义行组的正确方法......

此测试代码适用于我：

<!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>

Answer 3

您的HTML无效。 <div>内部<table>不能出现<td>，除非在<tr>单元格内，而您的行.moreLess行。更好的解决方案是将<tr class='moreLess'>类分配给表行：

{{1}}

然后，您的jQuery函数将表行滑入和滑出视图。

能有div包含表的一部分吗？

3 个答案: