<script src="jquery.min.js"></script>
<style>
* {margin: 0; padding: 0;}

.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 a{
    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 a:hover, .tree li a:hover+ul li a {
    background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
.tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before
{
    border-color:  #94a0b4;
}
</style>
<?php
$conn = mysqli_connect('localhost', 'root','','test') or die(mysqli_error);

$sq = "select treeid, treeusername, treeleftside, treerightside from treecreate";
$quer = mysqli_query($conn, $sq) or die(mysqli_error);

$arris = array();
while($row = mysqli_fetch_row($quer))
{
    $arris[] = $row[1]; 
}
 

echo '<div class="tree"><ul>
<li class="mainnode">';

$quer1 = mysqli_query($conn, $sq) or die(mysqli_error);
while($row = mysqli_fetch_row($quer1))
{
     
    if (in_array($row[2],$arris))
    {
        echo '<a href="#">'.$row[1].'</a>
         <ul>
         <li><a href="#">'.$row[2].'</a>';
         
         
         echo '</li>
         <li><a href="#">'.$row[3].'</a></li>
         </ul>
         ';
        
    }
    if(in_array($row[1],$arris))
         {
             echo '<ul>
             <li><a href="#">'.$row[2].'</a></li>
             <li><a href="#">'.$row[3].'</a></li>
             </ul>';
         }
    else 
    {
         echo ' <a href="#">'.$row[1].'</a> ';
    }

}

echo '</li>
    </ul>
</div>';
 ?>

             
 

<script>
$(document).ready(function(){
var top1 = '';
var lefttree = '';
var righttree = '';
 
    
});

</script>

请签出我的代码, 在此代码中,添加了以下内容,

  1. 呼叫jQuery
  2. CSS定义
  3. mysql连接和调用查询
  4. php循环调用
  5. 由于没有得到正确的树而导致的一些小错误

我想使用mysql数据库中的php / javascript创建MLM二进制树。 我尝试使用此代码制作错误的树。

记住树应该从数据库创建,已经创建的普通html二进制树。

任何解决此问题的专家。