Выбранные размеры преобразуются в таблицу div - PullRequest
Новая
       6

Выбранные размеры преобразуются в таблицу div

0 голосов
/ 25 ноября 2018

Может ли кто-нибудь помочь мне реконструировать эту или эту страницу?Где пользователь выбирает размеры через сетку.Затем количество выбранных блоков преобразуется в div, в тех же измерениях.

Или кто-нибудь рекомендует и JavaScript, если да, то какой?

1 Ответ

0 голосов
/ 25 ноября 2018

у нас есть две проблемы: одна выбирает, а другая генерирует.Генерация проста:

Уведомление : Это сделано быстро и грязно;innerHtml не должен использоваться, Пинг мне, если вы хотите, чтобы он был более отточенным :) https://jsfiddle.net/ynfb3Lh2/9/

<code><div id="selection">
</div>
<div id="target">
</div>
<pre id="text">
// Подготовьте наши цели const selectionContainer = document.getElementById ("selection");const targetContainer = document.getElementById ("target");const textContainer = document.getElementById ("text");// строки: сколько строк генерировать?// cols: сколько cols генерировать?// [_insertCallback]: мы должны вставить обратный вызов?// [_targetContainer]: куда мы должны поместить созданные div?// [_textContainer]: sГде нам писать наш HTML как обычный текст?function generateDiv (строки, столбцы, _insertCallback, _targetContainer, _textContainer) {// Создание наших элементов обертывания const table = document.createElement ("table");const tbody = document.createElement ("tbody");for (let r = 0; r generateDiv (r + 1, c+ 1, false, _targetContainer, _textContainer)} tr.appendChild (td)} // ... и добавленный здесь tbody.appendChild (tr)} table.appendChild (tbody) if (_targetContainer &&! _InsertCallback) {_targetContainer.innerHTML ='';_targetContainer.appendChild (таблица);} if (_textContainer &&! _insertCallback) {_textContainer.innerHTML = table.outerHTML .replace (/ td> <\ // gi, "td> & nbsp;/ gi, "> \ n");} возврат таблицы;} selectionContainer.appendChild (generateDiv (10, 10, true, targetContainer, textContainer));

и аналогично, создание выбираемой таблицы осуществляется с помощью аналогичной функции, которая добавляет информацию о строках и столбцах в каждую ячейку.Затем событие mouseClick для таблицы будет считать строки и столбцы и перейти к коду генерации.

...