Div不会留在我放的地方

时间:2016-07-27 19:50:39

标签: javascript php html bootstrap-modal

因此,我创建了这个页面,找到不同的客户并为每个客户加载数据。数据位于可折叠div中,底部数据集悬挂在模态上。这是我写的代码。

echo'<div id="findCustByFirstNameModal" class="modal modal-message modal-success fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"  style="width: 600px;">
            <div class="modal-header">
                <i class="glyphicon glyphicon-list-alt"></i>
            </div>
            <div class="modal-title">Success</div>
            <div class="modal-body">
                <div class="panel-heading">
            ';
                    foreach($test as $key => $val)
                    {
                        $custNum= $test[$key]["customerNumber"];
                        if($prevCustNum!=$custNum)
                        {
                            echo'
                    <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-'.$test[$key]["customerNumber"].'" href="#panel-element-'.$test[$key]["customerNumber"].'">
                        <table class="table" style="background-color: light-gray">
                            <tr>
                                <td>Customer Number:</td><td>'.$test[$key]["customerNumber"].'</td>
                            </tr>
                            <tr>
                                <td>Name:</td><td>'.$test[$key]["firstName"].' '.$test[$key]["lastName"].'</td>
                            </tr>

                        </table>
                    </a>
                </div>
                <div id="panel-element-'.$test[$key]['customerNumber'].'" class="panel-collapse collapse">
                <div class="panel-body">
                        <table class="table table-striped">
                                ';
                                foreach($test as $key => $val)
                            {
                                if($test[$key]["customerNumber"] == $custNum)
                                {
                                    echo'


                            <tr><td>Ticket Number:</td><td class="fontBlue"><form action="aap.php" method="POST"><input type="submit" id="submitButtonLink" name="ticketNumber" value="'.$test[$key]["ticketNumber"].'"></form></td></tr>
                            <tr><td>Description:</td><td>'.substr($test[$key]["issueDescription"], 0, 40).'</td></tr>
                                ';
                                }   
                            }
            echo'
                        </table>
                </div>
                </div>
                <div style="padding:30px;">
                </div>
                ';
        }
            $prevCustNum= $custNum;
    }

    echo'
                </div> <!-- / .modal-body -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
                </div>
        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
    </div>
';

这就是发生的事情 enter image description here

在页面源的此屏幕截图中,您可以看到结束div标签刚好在故障单信息之前的最后一个客户名称下移动。

enter image description here

代码中的所有内容都排成一列,因此我不确定导致此问题的原因。

1 个答案:

答案 0 :(得分:1)

您在第一个<div class="panel-heading">循环之前输出foreach。然后,您在循环中有</div>,但尚未打开任何新的<div>。这意味着循环中的</div>正在关闭在循环外部创建的<div class="panel-heading">。这将导致标签不匹配,并可能产生一些非常意外的结果。