javascript - 遍历 JSONObject 并打印 html

Question

我需要使用 JSON 对象创建一个 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':'bob@gmail.com'},
    {'name':'Tom','age':'30','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'Tom@gmail.com'},
    {'name':'Mike','age':'40','sex':'male','dob':'2012-12-01','dateenroll':'2012-01-01','dateinform':'2013-01-01','emailid':'Mike@gmail.com'},
  ]

  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/

Answer 1

快速查看输出

<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