PHP将MySQL表数据转换为手风琴

时间:2017-03-12 16:01:00

标签: php html css mysql html5

我有一个页面,我想让它在手风琴中显示数据库表的数据,同时有一些按钮来编辑手风琴上显示的数据。最初我试图显示手风琴,但点击它们时只有第一支手风琴折叠。

这是我目前拥有的代码:

<?php

    $sql = "SELECT nopId, studentname, studentcourse FROM nopforms";
    $result = $con->query($sql);

    if ($result->num_rows > 0) {
    // output data of each row
        while($row = $result->fetch_assoc()) {
            $studentname = $row["studentname"];
            $studentcourse = $row["studentcourse"];
            echo "<div class='pnel-group' id='accordion'>
                    <div class='panel panel-default'>
                    <div class='panel-heading'>
                    <h4 class='panel-title'>
                    <a data-toggle='collapse' data-parent='#accordion' href='#collapse1'>".$studentname."</a>
                        </h4>
                        </div>
                         <div id='collapse1' class='panel-collapse collapse'>
                            <div class='panel-body'>".$studentcourse."</div>
                        </div>
                        </div>
            ";
            }
    } else {
    echo "You have not submitted any logs!";
    }




    ?>

Html代码:

<div class="panel-group" id="accordion">
            <div class="panel panel-default">
            <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><?php echo $row["studentname"]; ?></a>
            </h4>
            </div>
            <div id="collapse1" class="panel-collapse collapse">
            <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
            </div>
                </div>
                </div>

感谢您的时间。

1 个答案:

答案 0 :(得分:0)

正如上面的评论中所建议的,每个手风琴都需要一个唯一的ID,否则它们都会指向同一个元素。

您可以按如下方式更改代码:

<?php

$sql = "SELECT nopId, studentname, studentcourse FROM nopforms";
$result = $con->query($sql);

$i = 0; 
if ($result->num_rows > 0) {
// output data of each row
    while($row = $result->fetch_assoc()) {
        $i++;
        $studentname = $row["studentname"];
        $studentcourse = $row["studentcourse"];
        echo "
            <div class='pnel-group' id='accordion".$i."'>
                <div class='panel panel-default'>
                    <div class='panel-heading'>
                        <h4 class='panel-title'>
                            <a data-toggle='collapse' data-parent='#accordion".$i."' 
                                    href='#collapse".$i."'>"
                                .$studentname."
                            </a>
                        </h4>
                    </div>
                    <div id='collapse".$i."' class='panel-collapse collapse'>
                        <div class='panel-body'>".$studentcourse."</div>
                    </div>
                </div>
            </div>
        ";
    }
} else {
echo "You have not submitted any logs!";
}

?>