jQuery功能后页面内容未显示 [英] Page content not showing after Jquery function
本文介绍了jQuery功能后页面内容未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在此JQuery函数中，基于JSON生成表，但是问题出在此函数之后，其他内容未显示.我正在尝试在此功能后添加html表.但它不能正常工作.为什么?以及我该如何解决.
In this JQuery function generate table based on JSON but problem is after this function other content is not showing. I'm trying to add html table after this function. but it's not working properly. why? and how can I solve this.
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>
推荐答案
代替此行:
$('body').append(html);
您应该写:
$(html).insertAfter('.another-section');
然后，您可以在.another-section元素之后附加表格. (.another-section只是这里的一个示例).您可以将孩子追加到DOM的任何位置，而不仅限于body的最后.
Then you can append the table after .another-section element. (.another-section is just an example here). You can append your child at any place of the DOM, not only at the last of the body.
这篇关于jQuery功能后页面内容未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
