php - 如何正确地将来自 mysql 的数据放入 <ul><li> 中？

Question

你们好，我正在使用 php 和 mysql 作为我的数据库制作一个二叉树。当从我的数据库中获取数据时，我想要的是将它们正确地放入 ul 和 li 中，正确地缩进.. 如您所见，它可能看起来非常好并且按预期工作，但是当您在开发工具中检查时，您会发现它没有正确缩进，因为缺少一些关闭的 ul 和 li 标签。

<div class="tree">
    <ul>
        <li><div><input type="checkbox">181210-1-105547-1</div>
            <ul>
                <li><div><input type="checkbox">181210-2-105603-2</div>
                <li><div><input type="checkbox">181210-3-105610-3</div>
                    <ul><li><div><input type="checkbox">181210-1-105614-4</div>
                        <ul><li><div><input type="checkbox">181210-2-105614-5</div>
                            <li><div><input type="checkbox">181210-3-105615-6</div>
                                </ul>
                                    <li><div><input type="checkbox">181210-3-105615-7</div>
                    </ul>
            </ul>   
        </li>
    </ul>
</div>

我该如何解决这个问题？

这是我的代码

<style>
    .tree ul {
      padding-top: 20px; position: relative;

      transition: all 0.5s;
      -webkit-transition: all 0.5s;
      -moz-transition: all 0.5s;
    }

    .tree li {
        float: left; text-align: center;
        list-style-type: none;
        position: relative;
        padding: 20px 5px 0 5px;

        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }

    .tree li::before, .tree li::after{
        content: '';
        position: absolute; top: 0; right: 50%;
        border-top: 1px solid #ccc;
        width: 50%; height: 20px;
    }
    .tree li::after{
        right: auto; left: 50%;
        border-left: 1px solid #ccc;
    }

    .tree li:only-child::after, .tree li:only-child::before {
        display: none;
    }

    .tree li:only-child{ padding-top: 0;}

    .tree li:first-child::before, .tree li:last-child::after{
        border: 0 none;
    }
    .tree li:last-child::before{
        border-right: 1px solid #ccc;
        border-radius: 0 5px 0 0;
        -webkit-border-radius: 0 5px 0 0;
        -moz-border-radius: 0 5px 0 0;
    }
    .tree li:first-child::after{
        border-radius: 5px 0 0 0;
        -webkit-border-radius: 5px 0 0 0;
        -moz-border-radius: 5px 0 0 0;
    }
    .tree ul ul::before{
        content: '';
        position: absolute; top: 0; left: 50%;
        border-left: 1px solid #ccc;
        width: 0; height: 20px;
    }
    .tree li div{
        border: 1px solid #ccc;
        padding: 5px 10px;
        text-decoration: none;
        color: #666;
        font-family: arial, verdana, tahoma;
        font-size: 11px;
        display: inline-block;

        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;

        transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
    }
    .tree li div:hover, .tree li div:hover+ul li div {
        background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
    }
    .tree li div:hover+ul li::after, 
    .tree li div:hover+ul li::before, 
    .tree li div:hover+ul::before, 
    .tree li div:hover+ul ul::before{
        border-color:  #94a0b4;
    }
  </style>
<div class="tree">
    <ul>
        <li><div><input type="checkbox">181210-1-105547-1</div>
<?php

    $host = 'localhost';
    $name = 'argent';
    $user = 'root';
    $pass = '';

    $dsn = 'mysql:host=' .$host .';dbname=' .$name;
    $options = array(
        PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
        PDO::ATTR_PERSISTENT => true
    );
    $conn = new PDO($dsn, $user, $pass, $options);

    function displayChildren($parent) {
        global $conn;

        $stmt = $conn->prepare('SELECT * FROM accounts WHERE sponsorUpline = ?');
        $stmt->bindValue(1, $parent);
        $stmt->execute();
        if($row = $stmt->rowCount() > 0) {
            echo '<ul>';
            while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
                echo '<li><div><input type="checkbox">' .$row['serialNumber'] .'</div>';
                if(displayChildren($row['serialNumber'])) {
                    displayChildren($row['serialNumber']);
                    echo '</li>';
                }
            }
            echo '</ul>';
        }
    }

    displayChildren('181210-1-105547-1');

?>  
        </li>
    </ul>
</div>

和是我的 table

Answer 1

看起来您只是有条件地关闭 </li>标签。

尝试移动 echo '<li/>';外面if block :

<?php
// from inside your  displayChildren function...
if($row = $stmt->rowCount() > 0) {
    echo '<ul>';
    while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        echo '<li><div><input type="checkbox">' .$row['serialNumber'] .'</div>';
        if(displayChildren($row['serialNumber'])) {
            displayChildren($row['serialNumber']);
        }
        echo '</li>';
    }
    echo '</ul>';
}
// ...