大家好！
我一直在网上寻找如何在向下滚动到底部的表格中加载更多行，但不幸的是，我只看到了 divs 教程。谁能告诉我如何执行这个？或示例代码或教程？
就像这样，我将运行一个 SELECT 查询并将 html 表中的显示限制为 500 条记录，但是当用户向下滚动到表的底部时，该记录将在表中加载另外 500 条记录。这可能吗？
【问题讨论】：
append到桌子上，div之间的区别这是次要的。
标签： javascript php ajax
$('#container').on('scroll', function() {
if($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
alert('end reached');
}
});<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
#container{
overflow: scroll;
max-height: 500px;
border: 2px solid;
}
</style>
</head>
<body>
<div id="container">
<table>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
<tr>
<td>hi</td>
<td>hello</td>
</tr>
</table>
</div>
</body>
</html>上面的代码将检测滚动何时到达表格的末尾。现在您可以将alert() 替换为$.post() 或$.ajax() 以从数据库中获取更多结果并append 表中的响应
【讨论】：
$(document).on('click','#load',function(){
$('#loading').append('<tr><td>3:1</td><td>3:2</td><td>3:3</td></tr>');
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="loading">
<tr><td>1:1</td><td>1:2</td><td>1:3</td></tr>
<tr><td>2:1</td><td>2:2</td><td>2:3</td></tr>
</table>
<input type="button" value="click to append" id="load"/>Zainul 描述了创建事件处理程序。
这个关于追加到表格的答案。
合并这两个答案。
【讨论】：