Javascript 如何制作一个无限的HTML按钮表

我有一个网站，它需要有一个无限表（-X和Y中的无穷大到+无穷大）。用户应该能够双向滚动，如果可能，还可以放大和缩小（在相同大小的视口中显示更多的行和列）。我需要对所有单元格进行点击检测，那么是否有任何方法可以使用HMTL/CSS/JS在每个单元格中创建这样一个带有按钮的表

我能在网上找到的最好的例子是，但是源代码（）相当大，查找所有相机/渲染/移动似乎是一个很大的麻烦，可能没有必要

我当前的代码不起作用（循环永远不会结束）

函数tableCreate（）{
var body=document.getElementsByTagName（'body'）[0]；
var tbl=document.createElement（'table'）；
tbl.style.width='100%'；
tbl.setAttribute（'border'，'1'）；
var tbdy=document.createElement（'tbody'）；
for（var i=-Infinity；i

查看延迟加载，基本上您只呈现用户希望看到的内容，因此首先呈现一个特定的大小，然后每次他滚动到表的末尾时添加该大小，并且只加载该侧。我不能给你一个工作的例子，因为从来没有真正的工作与懒惰加载这种方式，但谷歌它，你会发现一些工作的例子。当然，你的代码会做一个无限循环，因为你想要一个无限的表，是的，这些都是无限循环。关于你的应用程序的更多细节会很有用。你在做游戏吗？世界是否需要有状态，即用户向一个方向滚动一百万个单位，然后再向后滚动，他们必须看到完全相同的东西吗？是否有一个阈值，您可以在该阈值处随机化？内容是否按程序生成？数据是如何从/去往（服务器）的？有很多因素，所以这看起来是非常开放的。你不能枚举一个无限集，也不能呈现一个无限大的表。你需要做的是模拟一个无限大的（或者说“无限”可能比“无限”更好的描述）表，只渲染给定时间相关的部分，就像@chawkichalladia建议的那样。

function tableCreate() {
  var body = document.getElementsByTagName('body')[0];
  var tbl = document.createElement('table');
  tbl.style.width = '100%';
  tbl.setAttribute('border', '1');
  var tbdy = document.createElement('tbody');
  for (var i = -Infinity; i < Infinity; i++) {
    var tr = document.createElement('tr');
    for (var j = -Infinity; j < Infinity; j++) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode('\u0020'))
        i == 1 && j == 1 ? td.setAttribute('rowSpan', '2') : null;
        tr.appendChild(td)
    }
    tbdy.appendChild(tr);
  }
  tbl.appendChild(tbdy);
  body.appendChild(tbl)
}
tableCreate();