Сделаем красивую таблицу в 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
<table class="tbl"> <tr> <td class="tbl-hdr">N/N</td> <td class="tbl-hdr hdr-cl-0">Колонка1</td> <td class="tbl-hdr hdr-cl-1">Колонка2</td> <td class="tbl-hdr hdr-cl-2">Колонка3</td> </tr> <tr> <td class="tbl-hdr">Строка1</td> <td class="tbl-item cl-0" cellnum='0'>1</td> <td class="tbl-item cl-1" cellnum='1'>2</td> <td class="tbl-item cl-2" cellnum='2'>3</td> </tr> <tr> <td class="tbl-hdr">Строка2</td> <td class="tbl-item cl-0" cellnum='0'>4</td> <td class="tbl-item cl-1" cellnum='1'>5</td> <td class="tbl-item cl-2" cellnum='2'>6</td> </tr> <tr> <td class="tbl-hdr">Строка3</td> <td class="tbl-item cl-0" cellnum='0'>7</td> <td class="tbl-item cl-1" cellnum='1'>8</td> <td class="tbl-item cl-2" cellnum='2'><a class="btn" data-toggle="modal" data-target="#modal1">9</a></td> </tr> </table> <section> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="modal fade" id="modal1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button class="close" type="button" data-dismiss="modal"><i class="fa fa-close"></i></button> <h3 class="modal-title">Номер из таблицы</h3> </div> <div class="modal-body"> <span>Номер</span> <input type="text" name="num" class="numb"><br> </div> <div class="modal-footer"> <button class="btn" type="button" data-dismiss="modal"></button> </div> </div> </div> </div> </div> </div> </div> </section> |
Добавим стили к таблице html.
- Для всех ячеек у таблицы table с классом tbl зададим цвет background-color: #B2EBF2. Цвета подобраны по тонам, чтобы сочетались гармонично. Хорошая подборка по тонам цветов для таблицы тут. Размер у таблицы html зададим в пол экрана width: 50%. Сделаем рамку между ячейками общую одной толщины свойством border-collapse: collapse.
- Перейдем к стилям для каждой ячейки td, сперва зададим линии между border: 3px solid blue. Сделаем отступ от значения ячейки до границы padding: 5px и установим по центру.
- Если потребуется, всплывающее окно стилизуем ссылку другим цветом.
- tbl-hdr для заголовков сделаем жирный шрифт и другой цвет для выделения.
Стилизуем дополнительные три класса, которые будут назначаться скриптом в момент наведения на ячейку.
Для создания подсветки по строке и столбцу, с изменением цвета ячейки и заголовка таблицы html.
- hover класс изменяет цвет ячейки.
- hover-all будет менять все цвета ячеек по горизонтали и вертикали.
- hover-hdr заголовки подкрасятся в другой цвет, для выделения.
Стиль для модального окна из статьи выше.
Код в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
.tbl margin: 50px width: 50% border-collapse: collapse background-color: #B2EBF2 td border: 3px solid blue padding: 5px text-align: center vertical-align: center a color: #000 font-size: 1em .tbl-hdr font-weight: bold background: #00BCD4 .hover background-color: #9C27B0 cursor: pointer color: white .hover-all background-color: #EC407A color: white .hover-hdr background-color: #558B2F color: white .modal-dialog margin-top: 10% margin-left: 20% display: none .modal-header border-bottom: none h3 text-transform: uppercase color: blue text-align: center .btn &:focus outline: none .modal-content border-radius: 0 |
Сделаем код для таблицы 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$(function() { var table = $('.tbl'), cl = $('.tbl-item'); function mouseMove(){ $(cl).mouseover(function(){ var cellnum = $(this).attr('cellnum'), parent = $(this).parents("tr:first"); $('.tbl-item' + '.cl-' + cellnum).each(function(){ $(this).addClass('hover-all'); }) parent.find('td').addClass('hover-all') parent.find('.tbl-hdr').addClass('hover-hdr') table.find('.hdr-cl-' + cellnum).addClass('hover-hdr') $(this).removeClass('hover-all').addClass('hover'); }) $(cl).mouseout(function(){ $(this).removeClass('hover') var cellnum = $(this).attr('cellnum'), parent = $(this).parents("tr:first"); $('.tbl-item' + '.cl-' + cellnum).each(function(){ $(this).removeClass('hover-all'); }) parent.find('td').removeClass('hover-all') parent.find('.tbl-hdr').removeClass('hover-hdr') table.find('.hdr-cl-' + cellnum).removeClass('hover-hdr') }) } }); |
Сделаем, чтобы при нажатии на ячейку всплывало bootstrap окно с добавлением данных из ячейки.
Есть большая таблица на lending page, в которой перечень оборудования или услуг, покупатель нажимает на ту, которая нужна, высветится окно формы с данными из таблицы и сразу можно будет оформить заказ.
При клике мышкой по ссылке $(.tbl-item).click (function (event) мы получаем текстовое значение ячейки.
Присваиваем переменную значению ячейки var tdinfo = $(this).text ().
Затем переменную передаем в качестве значения для поля в форме.
Находим элемент с классом $(.numb) в форме и добавляем значение переменной val (tdinfo).
Проверяем, что передаются данные.
Код в common.js для передачи значения ячейки в форму.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { mouseMove(); $('.tbl-item').click(function(event){ event.preventDefault(); var tdinfo = $(this).text(); $('.numb').val(tdinfo); $('.modal-dialog').fadeIn(400, function () { $('.modal-dialog') .css('display', 'block') }); }); }); |
