Jquery功能后页面内容不显示

Question

在这个 JQuery 函数中，根据JSON 生成表，但问题是在这个函数之后没有显示其他内容。我正在尝试在此函数之后添加 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 &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
              <hr>
           </label>
           <label style="color:#e0e0e0">
              SITE &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <hr>
           </label>
           <label style="color:#e0e0e0">
              ABOUT US &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              <hr>
           </label>
           <label style="color:#e0e0e0">CONTACT US &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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 &copy; Green University 2016</p>
        </div>
        <div class="col-sm-2">
           <i class="fa fa-facebook-square fa-1x" style="color:#42a5f5"></i>&nbsp;
           <i class="fa fa-linkedin-square fa-1x" style="color:#42a5f5"></i>&nbsp;
           <i class="fa fa-twitter-square fa-1x" style="color:#42a5f5"></i> &nbsp;
           <i class="fa fa-google-plus fa-1x" style="color:#42a5f5"></i> &nbsp;
           <i class="fa fa-delicious fa-1x" style="color:#42a5f5"></i>&nbsp;
        </div>
     </div>
  </div>

Answer 1

代替这一行：

$('body').append(html);

你应该写：

$(html).insertAfter('.another-section');

然后您可以在.another-section 元素之后附加表格。 （.another-section 只是一个例子）。您可以在 DOM 的任何位置附加您的孩子，而不仅仅是在 body 的最后一个位置。

Answer 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>