通過JSONObject循環並打印html

我需要使用JSON對象創建一個html。我能夠創建表並打印result..For某種原因，該表獲得超出容器表...通過JSONObject循環並打印html

的JavaScript：

$(document).ready(function(){ 
    $('<div/>',{ 
    'id':'tablecontainer' 
    }).appendTo('#maincontainer'); 

    $('<div/>',{ 
    'id':'tablecontainer-1' 
    }).appendTo('#maincontainer');   

    $('#maincontainer').append($('<div id="layout" />') 
    .append($('<table id="set"/>') 
    .append('<thead><tr> <th>Name</th><th>Age</th> <th>Sex</th> <th>DOB</th> <th>Date Enrolled </th> <th>Date Informed</th> <th>Email Id</th>  </tr></thead>'))) 

    var jsonobject = [ 
    {'name':'Bob','age':'20','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'[email protected]'}, 
    {'name':'Tom','age':'30','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'[email protected]'}, 
    {'name':'Mike','age':'40','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'[email protected]'}, 
    ] 

    jsonobject.forEach(function(entry) { 
    $('#set').append(); 
    trObj = $('<tr>'); 
    trObj.append($('<td>').html(entry.name)); 
    trObj.append($('<td>').html(entry.age)); 
    trObj.append($('<td>').html(entry.sex)); 
    trObj.append($('<td>').html(entry.dob)); 
    trObj.append($('<td>').html(entry.dateenroll)); 
    trObj.append($('<td>').html(entry.dateinform)); 
    trObj.append($('<td>').html(entry.emailid)); 
    $('#set').append(trObj); 
    /*$('#test').append('<b>' + entry.name + '</b>')*/ 
    }); 
});

CSS：

#maincontainer{ 
    background-color: black; 
    width:500px; 
    height:200px; 
    color: red; 
} 
#tablecontainer{ 
    background-color:green; 
    width:500px; 
    height:200px; 
} 
#tablecontainer-1{ 
    background-color:red; 
    width:500px; 
    height:200px; 
} 
#layout{ 
    background-color:light-blue; 
    width:500px; 
    height:200px; 
}

http://jsfiddle.net/7wkg4/4/

來源

2013-12-13 user1050619

$（'＃set'）。append（）; < - 擺脫這個 – epascarello

@epascarello：我試過了，它仍然是同一個問題 – user1050619

我並不是說這樣會解決它，你只是有一個bug。你爲什麼不讓小提琴實際運行你發佈的代碼。我的猜測是內容高度>設置高度。 – epascarello

快看看輸出

<div maincontainer>    <-- height 200px 
    <div tablecontainer></div>  <-- height 200px 
    <div tablecontainer-1></div> <-- height 200px 
    <div layout>     <-- height 200px 
     <table set> 
    </div> 
</div>

200 + 200 + 200> 200

來源

2013-12-13 16:05:42 epascarello

~~你缺少收盤 </tr>標籤內 jsonobject.forEach(function(entry) {~~

我給這一個錯誤。你不需要關閉，因爲您創建jQuery對象直接

試試這個：

此外，您<table>結構具有<thead>，之後要附加<tr>節點。您應該在表格內部創建<tbody>，並在<tbody>標記內附加<tr>節點

來源

2013-12-13 16:10:05 Catalin

通過JSONObject循環並打印html

回答

相關問題