通过AJAX请求追加到表-没有出现在正确的位置

Append to Table via AJAX Request - Not Appearing in Correct Position

本文关键字：位置 请求 AJAX 追加 通过      更新时间：2023-09-26

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

下面是一个表的示例:

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

这是Javascript:

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;

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

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

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

不知道我在这里做错了什么。如果有帮助的话，我正在使用Bootstrap框架。

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

去掉<div id="content"></div>并像这样添加id到你的标题
<tbody id="content">

添加<tr>，在tr中添加<td>，然后在td中添加div。在table中写入的任何不在<td>中的内容将在table

之前显示。
<tr>
   <td>
       <div id="content"></div>
    </td>
</tr>
相关文章：