在这个基于JSON的JQuery函数生成表中，但问题是在此函数之后没有显示其他内容。我试图在此功能之后添加html表。但它不能正常工作。为什么？我该如何解决这个问题。
var data = [{
"UserID": 1,
"UserName": "rooter",
"Password": "12345",
"Country": "UK",
"Email": "sac@gmail.com",
"sac": "sac@gmail.com"
},
{
"UserID": 2,
"UserName": "binu",
"Password": "123",
"Country": "uk",
"Email": "Binu@gmail.com"
},
{
"UserID": 3,
"UserName": "cal",
"Password": "123",
"Country": "uk",
"Email": "cal@gmail.com"
}
];
$(document).ready(function() {
var html = '<table class="table table-striped">';
html += '<tr>';
var flag = 0;
$.each(data[0], function(index, value) {
html += '<th>' + index + '</th>';
});
html += '</tr>';
$.each(data, function(index, value) {
html += '<tr>';
$.each(value, function(index2, value2) {
html += '<td>' + value2 + '</td>';
});
html += '<tr>';
});
html += '</table>';
$('body').append(html);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
更新
示例页脚
<div class="container-fluid" style="background-color:#222;">
<div class="row">
<div class="col-sm-3">
<br>
<br>
<center><img class="icon" src="images/logo.png" width="291" height="218" alt="logo"></center>
</div>
<div class="col-sm-4" style="color:#e0e0e0;">
<h3 style="margin-top:10%;color:#42a5f5">ABOUT US.</h3>
<p>
Lorem Ipsum is simply dummy text of the Lorem Ipsum has been the industry's<br>
when an unknown printer took a galley of type and The following<br>
example shows how to<br><br>
get a three various-width columns <br>
make a type specimen book. It has survived not only <br>
but also the leap into electronic typesetting,<br>
</p>
</div>
<div class="col-sm-2">
<h3 style="margin-top:7%;color:#42a5f5"><br>NAVIGATION</h3>
<label style="color:#e0e0e0">
HOME
<hr>
</label>
<label style="color:#e0e0e0">
SITE
<hr>
</label>
<label style="color:#e0e0e0">
ABOUT US
<hr>
</label>
<label style="color:#e0e0e0">CONTACT US </label>
</div>
<div class="col-sm-3">
<h3 style="margin-top:4%;color:#42a5f5"><br>OUR LOCATION</h3>
<iframe frameborder="0" scrolling="no" width="250" height="200" src="https://maps.google.com/maps?hl=en&q=national school of business management,sri lanka&ie=UTF8&t=hybrid&z=15&iwloc=B&output=embed">
<div><small><a href="http://embedgooglemaps.com">
embedgooglemaps.com
embed google map
embed google maps
google maps karte erstellen
</a></small>
</div>
<div><small><a href="https://ultimatewebtraffic.com/">buy websit traffic Ultimatewebtraffic</a></small></div>
</iframe>
</div>
</div>
<hr>
<div class="row">
<div class="col-sm-10">
<p style="color:#29b6f6">Copyright © Green University 2016</p>
</div>
<div class="col-sm-2">
<i class="fa fa-facebook-square fa-1x" style="color:#42a5f5"></i>
<i class="fa fa-linkedin-square fa-1x" style="color:#42a5f5"></i>
<i class="fa fa-twitter-square fa-1x" style="color:#42a5f5"></i>
<i class="fa fa-google-plus fa-1x" style="color:#42a5f5"></i>
<i class="fa fa-delicious fa-1x" style="color:#42a5f5"></i>
</div>
</div>
</div>
答案 0 :(得分：1)
而不是这一行：
$('body').append(html);
你应该写：
$(html).insertAfter('.another-section');
然后，您可以在.another-section元素之后附加表格。 （.another-section只是一个例子）。您可以将您的孩子附加到DOM的任何位置，而不仅仅是body的最后一个。
答案 1 :(得分：-2)
移动你的
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
到你的javascript以上的某个地方。
试试这段代码：
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
var data = [{
"UserID": 1,
"UserName": "rooter",
"Password": "12345",
"Country": "UK",
"Email": "sac@gmail.com",
"sac": "sac@gmail.com"
},
{
"UserID": 2,
"UserName": "binu",
"Password": "123",
"Country": "uk",
"Email": "Binu@gmail.com"
},
{
"UserID": 3,
"UserName": "cal",
"Password": "123",
"Country": "uk",
"Email": "cal@gmail.com"
}
];
$(document).ready(function() {
var html = '<table class="table table-striped">';
html += '<tr>';
var flag = 0;
$.each(data[0], function(index, value) {
html += '<th>' + index + '</th>';
});
html += '</tr>';
$.each(data, function(index, value) {
html += '<tr>';
$.each(value, function(index2, value2) {
html += '<td>' + value2 + '</td>';
});
html += '<tr>';
});
html += '</table>';
$('body').append(html);
});
</script>
<table class="table table-striped">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>
</body>
</html>