Javascript 带有html表格标记的无限滚动（滚动加载）

我试图在html表上实现一个无限滚动，或者“滚动加载”。 数据存储在数据库中，我使用代码进行访问

我通过msdn上的一个示例实现了它，如下所示：

JS

 $(document).ready(function () { 

        function lastRowFunc() { 
            $('#divDataLoader').html('<img src="images/ajax-Loader.gif">'); 

            //send a query to server side to present new content 
            $.ajax({ 
                type: "POST", 
                url: "updates.aspx/GetRows", 
                data: "{}", 
                contentType: "application/json; charset=utf-8", 
                dataType: "json", 
                success: function (data) { 

                    if (data != "") { 
                        $('.divLoadedData:last').before(data.d);
                    } 
                    $('#divDataLoader').empty(); 
                } 

            }) 
        }; 

        //When scroll down, the scroller is at the bottom with the function below and fire the lastRowFunc function 
        $(window).scroll(function () { 
            if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
                lastRowFunc(); 
            } 
        });

        // Call to fill the first items
        lastRowFunc();
    }); 

$('.tbodyLoadedData').append(data.d);

或

或

但没有一个成功。

---

我很乐意听到关于如何使用html表正确实现它并使其工作的任何建议。

这可能是因为html无效：为什么不将行直接附加到

tr

，如下所示

HTML

<table>
 <thead>
  <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
 </thead>
 <tbody class="tbodyLoadedData">
 </tbody>
</table>
<div id="divDataLoader"> 
</div> 

。在Chrome的DOM inspector中查看您的方式，Chrome似乎正在将

div

移动到

表之前

我在JSBin中的表中添加了一个边框，以显示
div
正在被移出它。
a
div
在
表中的
并不是真正需要的，我想。如果这样做有效，请尝试：

ASPX:

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  </thead>
  <tbody class="divLoadedData">
  </tbody>
</table>
<div id="divDataLoader"> 
</div> 

function (data) { 
    if (data != "") { 
        $('.divLoadedData').append(data.d);
    } 
    $('#divDataLoader').empty();
}

您是否从Web服务获取标题？还是硬编码？在您的示例代码中，它们是硬编码的，因此不应该在插入到它们下面的元素中的任何内容下面移动。感谢您的输入，我将在下周在我的工作计算机（intranet）前尝试。如果有效，将标记为答案
$('.divLoadedData:last').after(data.d);

<table>
 <thead>
  <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
 </thead>
 <tbody class="tbodyLoadedData">
 </tbody>
</table>
<div id="divDataLoader"> 
</div> 

$('.tbodyLoadedData').append(data.d);

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  </thead>
  <tbody class="divLoadedData">
  </tbody>
</table>
<div id="divDataLoader"> 
</div> 

function (data) { 
    if (data != "") { 
        $('.divLoadedData').append(data.d);
    } 
    $('#divDataLoader').empty();
}