循环使用JSONObject并打印html

Looping through a JSONObject and printing html

本文关键字：打印 html JSONObject 循环      更新时间：2023-09-26

我需要使用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/

快速查看输出

<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

您在jsonobject.forEach(function(entry) {中缺少关闭的</tr>标记

这是我的错误。您不需要关闭，因为您直接创建jquery对象

试试这个：

此外，您的<table>结构具有<thead>，之后将附加<tr>节点。您应该在表中创建<tbody>，并在<tbody>标记中附加<tr>节点

相关文章：