Блог

Главная - Вопросы по программированию - Как создать бесконечную таблицу кнопок HTML

Как создать бесконечную таблицу кнопок HTML

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть веб-сайт, на котором должна быть бесконечная таблица (от-бесконечности до бесконечности в X и Y). Пользователь должен иметь возможность прокручивать в обе стороны и, если возможно, увеличивать и уменьшать масштаб (показывать больше строк и столбцов в окне просмотра того же размера). Мне нужно иметь обнаружение щелчков во всех ячейках, так что есть ли какой-нибудь способ создать подобную таблицу с кнопками в каждой ячейке, используя HMTL / CSS / JS?

Лучший пример, который я смог найти в Интернете, был https://shapez.io /, однако источник (https://github.com/tobspr/shapez.io ) довольно большой, и поиск всей камеры / рендеринга / движения кажется большой проблемой, которая может и не понадобиться.

Мой текущий код не работает (циклы никогда не заканчиваются)

 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 amp;amp; j == 1 ? td.setAttribute('rowSpan', '2') : null;
        tr.appendChild(td)
    }
    tbdy.appendChild(tr);
  }
  tbl.appendChild(tbdy);
  body.appendChild(tbl)
}
tableCreate();

Комментарии:

1. посмотрите на отложенную загрузку, в основном вы отображаете только то, что пользователь хочет видеть, поэтому сначала определенного размера, затем добавляете каждый раз, когда он прокручивает до конца таблицы любого размера, и загружаете только эту сторону. я не могу привести вам рабочий пример, потому что никогда не работал с отложенной загрузкой таким образом, но погуглите, и вы найдете какой-нибудь рабочий пример. и, конечно, ваш код будет выполнять бесконечный цикл, поскольку вам нужна бесконечная таблица

2. Да, это бесконечные циклы, все в порядке. Было бы полезно узнать больше о вашем приложении. Вы создаете игру? Должен ли мир быть с отслеживанием состояния, т. Е. Пользователь прокручивает в одном направлении миллион единиц, затем прокручивает назад, должны ли они видеть точно то же самое? Существует ли порог, при котором вы можете рандомизировать? Генерируется ли содержимое процедурно? Как / откуда поступают / отправляются данные (на сервер?)? Существует множество факторов, поэтому это кажется довольно открытым.

3. вы не можете перечислять бесконечный набор и не можете отображать бесконечно большую таблицу. Что вам нужно сделать, так это смоделировать бесконечно большую (или, возможно, «неограниченная» будет лучшим описанием, чем «бесконечная») таблицу, отображая только те части, которые актуальны в данный момент времени, как предлагает @chawkichalladia.