Question

我有一个简单的AJAX请求作为页面上无限滚动的一部分，该页面提取更多记录以添加到显示前20行的现有表中。 AJAX请求正在运行并返回正确的数据，但它没有出现在正确的位置（它显示在现有行的上方）。

以下是表格的示例：

＆＃13;

<div>
  <br />
  <table class="table table-striped table-bordered">
    <thead>
      <th scope="col">Date</th>
      <th scope="col">Time</th>
      <th scope=“col”>Location</th>
      <th scope=“col”>Type</th>
      <th scope=“col”>Manager</th>
    </thead>
    <tbody>
      <tr>
        <td><a href="eventDetails.php?action=eventLink&eventID=56500">Aug 26</td>
		<td> 4:00 PM</td>
		<td> Sydney</td>
		<td> In House</td>
		<td> Barney Rubble</td>
	</tr>
	<tr>
	    <td><a href="eventDetails.php?action=eventLink&eventID=56941">Aug 26</td>
		<td> 4:00 PM</td>
		<td> Melbourne</td>
		<td> External</td>
		<td> Betty Rubble</td>
	</tr>
	<tr>
		<td><a href="eventDetails.php?action=eventLink&eventID=56982">Aug 26</td>
		<td> 5:00 PM</td>
		<td> Dallas </td>
		<td> External</td>
		<td> Fred Flinstone</td>
	</tr>
	<div id="content"></div>										
    </tbody>
</table>
</div>

＆＃13;

这里是Javascript：

＆＃13;

var skip = 20;
var action = "<?php echo $action ?>";
$(window).scroll(function() {
  if ($(window).scrollTop() == $(document).height() - $(window).height()) {
    loadArticle(skip);
    skip += 20;
  }
});

function loadArticle(pageNumber) {
    $.ajax({
      url: "getRecords.php",
      type: 'POST',
      data: "action=" + action + "&skip=" + skip,
      success: function(html) {
        $("#content").append(html); // This will be the div where our content will be loaded
      }
    });
    return false;

＆＃13;

我在最后一个表行之后添加了一个div来将新行插入：

<div id="content"></div>

但是新行没有出现在最后一行之后，而是出现在现有行之上。

不确定我在这里做错了什么。如果有帮助，我会使用Bootstrap框架。

Answer 1

在这样的表中div之后，您不能拥有tr。如果您这样做，浏览器将不会将其呈现在您放置的位置。

摆脱<div id="content"></div>并将id添加到你的tbody中 <tbody id="content">

Answer 2

添加<tr>并在tr添加<td>，然后在td添加div。 table中不在<td>内的任何内容都会显示在table

之前

<tr>
   <td>
       <div id="content"></div>
    </td>
</tr>

通过AJAX请求附加到表 - 未出现在正确的位置

2 个答案: