ul li list结构javaScript

时间:2012-10-17 12:33:12

标签: javascript html

我有以下结构:国家,省,市和郊区。 如何在列表中添加以下结构。我将按照json格式从数据库中提取数据,如下表所示。 想存储它并将其保存到类似下面的列表中。

<li>South Africa</li>
<ul>
<li><h3>Gauteng</h3><p>Gauteng Province.</p>
<ul>
    <li>Ekhurhuleni                         
  <ul>                          
    <li class="liid"><a href="#">Actionville</a></li>   
    <li class="liid"><a href="#">Alberton</a></li>
    <li class="liid"><a href="#">Bakerton</a></li>
    <li class="liid"><a href="#">Bedfordview</a></li>
</ul>                   
</li>
</ul>

我必须将结构添加回db,所以我也需要保留密钥 这是我的数据库表:

Table Country
CountryID   Country
1           South Africa
2           Egypt


Table Province
ProvinceID    Provincename  CountryID
1             Gauteng       1
2             Eastern Cape  1
3             Free State    1

Table City
CityID        CityName       ProvinceID
1             Ekurhuleni     1


Table Suburb
SuburbID      SuburbName     CityID
1             Actonville     1
2             Germiston      1

2 个答案:

答案 0 :(得分:0)

PHP:

$countries = array();
$q = "SELECT * FROM Country";
$res = mysql_query($q);
while($row=mysql_fetch_assoc($res)){
    $countryId = $row['CountryID'];
    $countries[$countryId] = array("data"=>$row,"provinces"=>array());
    $provinces = &$countries[$countryId]["provinces"];
    $qP = "SELECT * FROM Province P WHERE P.CountryID = $countryId";
    $resP = mysql_query($qP);
    while($rowP = mysql_fetch_assoc($resP)){
        $provinceId = $rowP['ProvinceID'];
        $provinces[$provinceId] = array("data"=>$rowP,'cities'=>array());
        $cities = &$provinces[$provinceId];
        $qC = "SELECT * FROM City C WHERE C.ProvinceID = $provinceId";
        $resC = mysql_query($qC);
        while($rowC = mysql_fetch_assoc($resC)){
            $cityId = $rowC['CityID'];
            $cities[$cityId] = array("data"=>$rowC,'suburbs'=>array());
            // AND SO ON FOR SUBURBS
        }
    }
}

$output="<ul>";
foreach($countries as $countryId=>$countryArray){
    $output.="<li id='$countryId'>";
    $output.="<h1>".$countryArray['data']['countryName']."</h1>";
        $output.="<ul>";
        foreach($countryArray['provinces'] as $provinceId=>$provinceArray){
            $output.="<li id='$provinceId'>";
            $output.="<h2>".$provinceArray['data']['provinceName']."</h2>";
            $output.="</li>";
        }
        $output.="</ul>";
    $output.="</li>";
}

答案 1 :(得分:0)

var Countries = [{...}, {...}, ...];
var Provinces = [{...}, {...}, ...];
var Cities    = [{...}, {...}, ...];
var Suburbies = [{...}, {...}, ...];

var countriesUl = document.createElement('ul');
for (var i in Countries) {
    var countryLi = document.createElement('li').appendTo(countriesUl);
    document.createTextNode(Countries[i].Country).appendTo(countryLi);
    var provincesUl = document.createElement('ul').appendTo(countryLi);
    for (var j in Provinces) {
        if (Provinces[j].CountryID != Countries[i].CountryID) continue;
        var provinceLi = document.createElement('li').appendTo(provincesUl);
        document.createTextNode('<h3>' + Provinces[j].Provincename + '</h3>').appendTo(provinceLi);
        document.createTextNode('<p>' + Provinces[j].Provincename + ' province</p>').appendTo(provinceLi);
        var citiesUl = document.createElement('ul').appendTo(provinceLi);
        for (var k in Cities) {
            if (Cities[k].ProvinceID != Provinces[j].ProvinceID) continue;
            var cityLi = document.createElement('li').appendTo(citiesUl);
            document.createTextNode(Cities[k].CityName).appendTo(cityLi);
            var suburbiesUl = document.createElement('ul').appendTo(cityLi);
            for (var l in Suburbies) {
                if (Suburbies[l].CityID != Cities[k].CityID) continue;
                var suburbLi = document.createElement('li').appendTo(suburbiesUl);
                document.createTextNode(Suburbies[l].SuburbName).appendTo(suburbLi);
            }
        }
    }
}

// do whatever you want with countriesUl
countriesUl.appendTo(document.body);