jQuery函數未正確加載引導程序頁腳

Question

我試圖根據JSON輸出生成引導程序表。現在我需要在這些表格之後加載引導腳註。但有些表格不顯示頁腳。

這裏是我的代碼

<script> 
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>'; 

    //$('.table.table-striped').after(html); 
    // $('body').append(html); 
    $(html).insertAfter('.para'); 
}); 




    $(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>'; 

    //$('.table.table-striped').after(html); 
    // $('body').append(html); 
    $(html).insertAfter('.para'); 
}); 


    $(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>'; 

// $('.table.table-striped').after(html); 
$(html).insertAfter('.para'); 

}); 


</script> 

頁腳

<footer> 
<div class="container-fluid" style="background-color:#222;bottom:0; position:fixed;"> 
<div class="row"> 
    <div class="col-sm-3"> 
     <br> 
     <br> 
     <center><img class="icon" src="images/logo.png" 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; 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> 
</footer> 

這裏是我的輸出結果

Answer 1

你需要給你的身體元素的填充等同於您的頁腳的高度。

這個CSS將做到這一點，但你可以這樣做，也是在網上使用造型

body {padding-bottom: 250px}