大家好!
我一直在网上查看如何在向下滚动到底部时在表格中加载更多行，但不幸的是，我只看到了 div 教程。谁能告诉我如何执行此操作？或示例代码或教程？
是这样的，我将运行一个 SELECT 查询并将 html 表中的显示限制为 500 条记录，但是当用户向下滚动到表底部时，该记录将在表中加载另外 500 条记录。这可能吗？
最佳答案
$('#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() 以从数据库和 中获取更多结果>附加表中的响应
关于javascript - 向下滚动加载更多表格行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49248221/