Переводим таблицу Excel в HTML с сохранением функционала, используя Javascript

В этом уроке мы разберем, как перевести таблицу Excel в HTML, с сохранением интерактивных элементов и формул. В итоговую верстку HTML можно будет вносить новые данные, а яваскрипт будет их обрабатывать по заданным формулам и выводить результат. Урок рассчитан на аудиторию, имеющую базовые знания HTML и CSS.

Для урока возьмем небольшую таблицу Excel - четыре колонки, четыре строки, включая заголовок и строку с итогом. В полученной верстке надо иметь возможность изменять значения в ячейках В2, В3, С2 и С3. После изменения данных скрипт должен осуществлять перерасчет сумм в столбце D.

Перенос данных из таблицы Excel в таблицу HTML

Добавим в Excel таблицу между существующими столбцами пустые столбцы, в том числе и перед столбцом А. Полученный пустой столбец А заполним словом Begin, столбец I заполним словом End, а пустые столбцы в середине таблицы (C, E и G) - заполняем словом Middle.

Можно использовать любые другие слова и символы, главное, чтобы вы не запутались, и они были уникальны для таблицы.

После заполнения таблицы сохраняем её как файл CSV (разделители - запятые) и закрываем. Открываем полученный файл в Notepad++, либо в любом другом современном текстовом редакторе.

Находим опцию замены и выбираем заменить Begin; на <tr><td>.

Точно так же заменяем ;End на </td></tr>, а ;Middle; на </td><td>.

Для получения полноценной HTML таблицы остается добавить открывающий тэг <table> в начале, закрывающий тэг </table> в конце и поменять в первой строке тэги обычной ячейки <td> </td> на тэги ячейки заголовка <th></th>. После этого файл надо сохранить в HTML формате и поправить отступы согласно вложенности элементов.

Создание функционала в HTML и оформление CSS

Доступ к элементам HTML проще всего осуществлять по id поэтому присвоим каждой ячейке уникальный id (внутри тэга <td>), соответствующий нумерации бывшей в формате Excel.

Так как в ячейках B2, В3, C2 и С3 необходимо дать пользователю возможность менять значения - надо внутрь ячейки вставить текстовые инпуты (input) - на скриншоте ниже.

В этих ячейках имеет смысл id присвоить не ячейке, а непосредственно инпуту. В данных, вносимых в атрибут value, для десятичных дробей используем только символ точки, запятую javascript будет воспринимать как часть строчной переменной и будет ошибка, при обработке. Присваиваем id myTable таблице, это понадобиться для доступа к ней из скрипта.

После закрывающего тэга </table> добавляем кнопку с помощью парного тэга <button> и добавляем атрибут: onclick="MyCount();".

Атрибут onclick будет вызывать функцию MyCount(); после клика левой кнопкой мыши по кнопке.

Оборачиваем наш код тэгами <body></body> и тэгами <html></html>. Между тэгом <html> и <body> вставляем тэги <head></head>. Создаем заголовок с помощью тэгов <title></title>. Создаем файл стилей, файл яваскрипта, в <head> прописываем путь к ним.

Добавляем стили – шрифт цвет, размер ячеек, рамки и выравнивание текста

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

Скрипт для обработки таблицы

Для удобства разделим наш скрипт на два блока – блок проверки корректности введенных данных и блок расчета результатов. Если будут обнаружены некорректные данные - функция будет прерываться, пользователь будет проинформирован об ошибке, ячейка с некорректными данными будет помечена красной рамкой. Если во введенных данных ошибок нет - функция завершит расчет и выведет результат в нужные ячейки.

В первом блоке создаем переменную tableElem в которую присваиваем объект таблица, найденный по id myTable. Создаем коллекцию элементов elements найденную в таблице по тэгам инпут (input).

Запускаем цикл от нуля до elements.length (количество объектов в коллекции), который будет перебирать все инпуты в таблице. Мы не знаем, запускалась ли наша функция ранее, помечались ли ячейки с ошибками красной рамкой. Поэтому первым шагом в цикле мы отменим в перебираемом элементе стиль, помечающий ячейки с ошибками .style.border="none".

Следующим шагом мы проверим - является ли значение в инпуте числом (используем встроенную функцию isNaN). Если в инпуте не число – добавляем к элементу красную рамку, выводим сообщение об ошибке и прерываем функцию. Если ошибки нет - переходим к следующему элементу коллекции. После перебора всей коллекции (ошибок не обнаружено) функция переходит к исполнению второго блока.

Во втором блоке рассчитываем произведение чисел в столбцах количество и цена (получаем к ним доступ с помощью свойства инпут .value). Выводим результат в ячейки столбца D, ограничивая количество знаков после запятой до двух (используем функцию .toFixed()). Итоговую сумму выводим в ячейку D4, как сумму значений взятых в ячейках D2 и D3.

Так как взятые напрямую из ячейки значения строчные - необходимо перед ними поставить оператор «+», который будет не оператором сложением, а оператором перевода строчной переменной в числовую.

Веб-баттл: React vs. Angular Хочу для себя зафиксировать мини-обзор двух популярных инструментов для front-end веб-разработки - React и Angular 2. Фреймоворки будем оценивать на о...
Создаем анимированные иконки с помощью Snap.svg... Анимированные элементы стали неотъемлемой частью настольных и мобильных сайтов. Анимация SVG набирает популярность, и в этой статье мы покажем, как со...
6 непопулярных, но очень удобных возможностей ES6... Статья про 6 непопулярных, но очень удобных возможностей ES6. Как известно, стандарт Ecmascript 6 опубликовали в июне 2015. Но так как многое уже импл...

Опубликовано в 18:43, 13 ноября 2017 | Обновлено в 18:58, 13 ноября 2017 | Просмотров: 125