html表格支持响应,javascript – HTML表格大时响应缓慢

我在一个网页上管理产品数据,其中所有产品显示在一个4列(索引号,SKU,产品描述,库存)的表格中.

我遇到的问题是,当桌面很长(现在约1000个产品)时,页面非常慢(我有tr：hover efect由CSS制作).

为了解决这个问题,我最初使用AJAX加载数据并存储在数组中,然后使用下面的代码在向下滚动时显示数据：

if (tablesDIV.scrollTop> = tablesDIV.scrollHeight - (tablesDIV.clientHeight + 80)) {

/*...*/

}

它给了一个很好的结果,但是当你按“结束”到达时,它没有到达结束,当你加载所有数据时,页面再次变慢.

这个问题有没有一些有趣的解决方案？

编辑：上传CSS代码.

#tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default}

#tables tbody th{font-weight:700;text-overflow:none}

#tables tbody tr{background:#FFF;cursor:pointer}

#tables tbody tr:nth-child(even){background:#F8F9FC}

#tables tbody tr:hover{background:#CDE}

EDIT2：添加了演示链接.