Ноябрь 2017
Автор: Рубрика: Верстка Комментариев нет

Делаем красивую таблицу html с записью данных в форму заказа

Делаем красивую таблицу html

Сделаем красивую таблицу в html, с разными цветами у ячеек.

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

Сделаем структуру таблицы html.

Задаем тег table с классом tbl, внутри будут колонки с тегом tr и ячейки по горизонтали для каждой колонки td.

Сколько внутри тега tr будет ячеек td, столько и будет колонок.

Таблица заполняется сверху вниз построчно с лева на право.

Сделаем таблицу из четырех колонок с классом tbl-hdr у всех верхних ячеек td, чтобы отдельно стилизовать, так как это заголовки.

Второй класс будет hdr-cl-0 с номером, чтобы подсвечивать всю колонку.

Для ячеек с данными сделаем класс tbl-item, второй cl-0, чтобы менять цвет у строки.

У каждой ячейки будет атрибут cellnum равный номеру строки ячейки.

Потом скриптом будем это учитывать.

Чтобы подключить всплывающее окно с номером ячейки сделаем ссылку на 9 ячейку.

Всплывающее модальное окно возьмем из статьи.

Можно окно реализовать вторым способом через плагин magnific popup.

Код в index.html.

Добавим стили к таблице html.

  1. Для всех ячеек у таблицы table с классом tbl зададим цвет background-color: #B2EBF2. Цвета подобраны по тонам, чтобы сочетались гармонично. Хорошая подборка по тонам цветов для таблицы тут. Размер у таблицы html зададим в пол экрана width: 50%. Сделаем рамку между ячейками общую одной толщины свойством border-collapse: collapse.
  2. Перейдем к стилям для каждой ячейки td, сперва зададим линии между border: 3px solid blue. Сделаем отступ от значения ячейки до границы padding: 5px и установим по центру.
  3. Если потребуется, всплывающее окно стилизуем ссылку другим цветом.
  4. tbl-hdr для заголовков сделаем жирный шрифт и другой цвет для выделения.

Стилизуем дополнительные три класса, которые будут назначаться скриптом в момент наведения на ячейку.

Для создания подсветки по строке и столбцу, с изменением цвета ячейки и заголовка таблицы html.

  1. hover класс изменяет цвет ячейки.
  2. hover-all будет менять все цвета ячеек по горизонтали и вертикали.
  3. hover-hdr заголовки подкрасятся в другой цвет, для выделения.

Стиль для модального окна из статьи выше.

Код в main.sass.

Сделаем код для таблицы java.

Чтобы в момент наведения курсором на ячейку она поменяла цвет и добавились классы напишем скрипт.

Берем в переменную ячейку cl = $(.tbl-item).

При наведении мышки на данную ячейку с помощью функции $(cl).mouseover получаем значение атрибута cellnum у ячейки, на которую навели курсор.

Добавляем в переменную var cellnum.

Вторая переменная parent это родитель ячейки, на которую наводим.

Затем ищем элементы, у которых есть $(.tbl-item + .cl- + cellnum).each.

  • Если навели на ячейку с cellnum=1, то мы ищем все ячейки с таким же номером и двумя классами cl и tbl-item.
  • Всем у которых есть данные классы и номер cellnum=1 добавляем класс изменения цвета в розовый из стиля css $(this).addClass (hover-all).

Дальше ищем родителя parent.find и им тоже добавляем этот класс addClass (hover-all), окрашиваем столбец в такой же цвет.

Так как нам нужно окрасить класс у родителя, то снова обращаемся parent.find (.tbl-hdr).addClass (hover-hdr) и ищем классы заголовков, чтобы им назначить класс hover-hdr, у которого в стиле темно зеленый цвет.

Теперь в самой таблице ищем ячейку с классом hdr-cl, у которой есть атрибут cellnum и добавляем класс hover-hdr.

Для ячейки, на которую наводим $(this), удаляем removeClass (hover-all), потому что всем ячейкам добавится этот класс. Присвоим цвет классом addClass (hover).

Так мы задействовали три класса в css с новыми цветами.

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

Код common.js.

Красивая таблица html с изменением цветов у ячеейк при наведении

Сделаем, чтобы при нажатии на ячейку всплывало bootstrap окно с добавлением данных из ячейки.

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

При клике мышкой по ссылке $(.tbl-item).click (function (event) мы получаем текстовое значение ячейки.

Присваиваем переменную значению ячейки var tdinfo = $(this).text ().

Затем переменную передаем в качестве значения для поля в форме.

Находим элемент с классом $(.numb) в форме и добавляем значение переменной val (tdinfo).

Проверяем, что передаются данные.

Код в common.js для передачи значения ячейки в форму.

Красивая таблица html с переносом данных в форму заказа

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

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

Комментарии запрещены