Подсветка строк и колонок таблицы


Содержание

Подсвечивание строк таблицы

Не редкой является ситуация, когда при просмотре данных в таблице можно перескочить взглядом с одной строки на другую, при этом заметить, что смотришь не туда куда нужно, не всегда удается. Однако этой путаницы можно легко избежать, подсвечивая нужную строку в таблице (а в этом нам поможет Javascript). Подсвеченная строка выделяется из серой массы строк таблицы и не позволяет сбиться, к тому же, это ещё и красиво смотрится.

Начнем с примера

Пример 1. Подсветка строк таблицы при наведении мыши на строку + подсветка последней кликнутой строки.

Поводите мышкой над строками таблицы, покликайте на нескольких строках.

Заголовок
1 Значение Значение
2 Значение Значение
3 Значение Значение
4 Значение Значение
5 Значение Значение
6 Значение Значение
7 Значение Значение
8 Значение Значение
9 Значение Значение
10 Значение Значение
Нижний колонтитул Нижний колонтитул

Пример 2. Подсветка по клику нескольких строк, а не только одной как в примере 1 (подсветка при наведении мыши на строку отключена).

Покликайте на нескольких строках.

Заголовок
1 Значение Значение
2 Значение Значение
3 Значение Значение
4 Значение Значение
5 Значение Значение
6 Значение Значение
7 Значение Значение
8 Значение Значение
9 Значение Значение
10 Значение Значение
Нижний колонтитул Нижний колонтитул

Пример 3. Подсветка строк таблицы при наведении мыши на строку (подсветка по клику полностью отключена).

Поводите мышкой над строками таблицы.

Заголовок
1 Значение Значение
2 Значение Значение
3 Значение Значение
4 Значение Значение
5 Значение Значение
6 Значение Значение
7 Значение Значение
8 Значение Значение
9 Значение Значение
10 Значение Значение
Нижний колонтитул Нижний колонтитул

Взгляд изнутри

Первым делом создаем обычную таблицу, без какой либо подсветки строк. Придаем таблице некий начальный облик с помощью CSS.

Это обычная таблица из 3 строк, по 3 ячейки в строке. Первая ячейка заголовочная и задана тегом TH.

1 Значение Значение
2 Значение Значение
3 Значение Значение

Теперь добавляем функциональность подсветки. В разделе head подключаем библиотеку функций: , а после закрывающегося тега

, вызываем функцию highlightTableRows(), из ранее подключенной библиотеки, для инициализации подсветки.

Рассмотрим подробнее функцию highlightTableRows(), а вернее её аргументы.

Синтаксис: highlightTableRows(tableId, highlightClass, clickClass, multiple)

  • tableId — id таблицы, к которой нужно применить подсвечивание;
  • highlightClass — имя CSS-класса который нужно применить к строке (к тегу TR) при наведении на неё курсора мыши (если передать пустую строку, то подсветки при наведении не будет);
  • clickClass — имя CSS-класса который нужно применить к строке (к тегу TR) при клике на ней (если передать пустую строку, то подсветки по клику не будет);
  • multiple — этот аргумент разрешает или запрещает подсветку по клику нескольких строк, по умолчанию true — подсветка нескольких строк разрешена, если передать значение false, то подсвечиваться будет лишь последняя кликнутая строка.

Примеры:

  • highlightTableRows(«myTable», » >//подсветка только при наведении
  • highlightTableRows(«myTable», » >//подсветка при наведении на строку курсора мыши и по клику на строке. Множественная подсветка строк по клику отключена.
  • highlightTableRows(«myTable», «», » > //подсветка только по клику на строке. Множественная подсветка строк по клику разрешена.

Так. У нас есть таблица, библиотека функций, и мы знаем, как инициализировать подсветку. Теперь осталось определить стили, которые будут применяться к ряду при наведении и/или клике.

В итоге документ принимает вид:

И вот что получилось:

1 Значение Значение
2 Значение Значение
3 Значение Значение

. Не забудьте скачать и сохранить у себя библиотеку функций hltable.js

Важно знать

Опера версии ниже 9 испытывает серьезные трудности с применением стилей к таблицам, содержащим разделы THEAD, TFOOT, TBODY.

Поверхностно о реализации

Как вы уже поняли, всю работу выполняет функция highlightTableRows(). Что же она делает? Данная функция назначает таблице обработчики событий: onmouseover и onmouseout для подсветки при наведении мыши на ряд, и onclick для подсветки по клику. Соответственно, когда пользователь наводит курсор на строку, срабатывает функция-обработчик onmouseover, которая добавляет к строке класс с именем, переданным вторым аргументом. При выходе за границы строки срабатывает событие onmouseout, которое отменяет применение к строке класса. Ну и по клику вызывается обработчик onclick, который либо применяет класс, переданный третьим аргументом, к строке, либо отменяет его действие. Также onclick смотрит на аргумент multiple, и если он равен false (запрещено множественное выделение строк по клику), то обработчик отменяет действие класса на строку которая была «кликнута» до этого, а затем применяет класс к новой строке.

Координатное выделение строки и столбца

Описание проблемы

Мне часто приходится работать с «широкими» таблицами, которые не помещаются на экран. Поэтому при перемещении влево вправо глаза теряют текущую строку. Ее приходится долго искать и перепроверять в правильную ли строку вводятся данные. Чтобы этого избежать можно подсвечивать активную строку и столбец. Сделать это удобно с помощью надстройки VBA-Excel.

Вот так работает эта функция.

Как включить подсветку текущей строки и столбца

Координатное выделение включается очень просто: перейдите на вкладку надстройки VBA-Excel и в меню Подсветка выберите Включить перекрестное выделение.

Подсветка автоматически будет работать во всех книгах и на всех листах до тех пор пока вы не нажмете команду Отключить перекрестное выделение или не закроете книгу.

Настройки выделения

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

Здесь можно указать подсвечивать ли строки и столбцы вместе или по отдельности.

Можно отдельно указать цвет заливки и шрифта.

Нажмите Сохранить и программа запомнит настройки.

Форум

Справочник

Поиск по форуму
Расширенный поиск
К странице.
Страница 3 из 4 3 4 >

А почему один-то хедер не будет колонку растягивать?

От rowspan придется отказаться. понял. жаль. ну да ладно.
главное, чтобы colspan работал

а кто-нибудь что-нибудь знает про onmouseover для ?
он и не должен отрабатывать?

Сообщение от ctocopok а кто-нибудь что-нибудь знает про onmouseover для ?
он и не должен отрабатывать?

Так вроде никто такого и не обещал. Сам кол и так пока не очень-то поддерживается (может уже поддерживался) браузерами.

Чего тут сложного. Ставишь mouseover на всю таблицу, вычисляешь event.target/srcElement, находишь какой он по счёту(cellIndex) и меняешь у соответствующего col стиль.)

Кстати допилил чуток велосипед. Теперь он не зависит от ширины скроллбара и свободно растягивается на любую заданную ширину(можно и в процентах).

. upd
Ан нет, опера цучко не меняет динамически стиль у col, так что обломчик.

. upd2
Добавил вариант подсветки колонок, не самый лучший, зато самый быстрый в случае больших таблиц.)
Велосипеды такие велосипеды.

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

она (образно) такова:

И вот хотелось бы ей обе стровчки-то и зафиксировать. Фиг с ним с RowSpan, он не так важен, но просто многострочность (два TR) нужна, и объединение заголовков в верхней строке тоже нужно.
Видимо, во второй строке тоже как-то дивы надо позиционировать, попадая ровно-ровно под дивы первой строки?

Сообщение от Aetae Для кого комменты ставил?)

Я был очень, ОЧЕНЬ невнимателен. не заметил классов «хедер миддл» и «хедер нижний»

Спасибо!! Буду тестить.

Всё основано на том что элемнты с position:absolute отсчитывает вою позицию от ближайшего родителя с position отличной от static(по умолчанию)

Сообщение от ctocopok Сделать подсветку строчек не проблема — onMouseOver и onMouseOut для спасают вебмастера.

Но вот проблема. Таблица — просто стена текста (даже больше цифирей), и это все как-то сплошняком. Хочется улучшить читабельность путем выделения не только строки, но и столбца — подсветкой.

Для справки, строк до 108 в таблице, столбцов — порядка 28.
Данные, в основном, числовые, иногда десятичные дроби, иногда целые числа.

Размышлял, додумался лишь до проставления каждой ячее таблицы свойств onMouseXXX, и в обработчиках вычислять (по id, наверное), что за ячея событие вызвала, к какому столбцу принадлежит, затем все ячеи в этом столбце «красить» или класс им менять.
Может, есть попроще решения?

Еще вопрос. Как сделать заголовок у таблицы неподвижным (не скроллящимся), а скроллить только тело таблицы? Аналог «закрепить области» в экселе.

Подсветка колонок таблиц с помощью jQuery

columnHover — это плагин jQuery, который организует подсветку столбцов таблицы при наведении курсора. Плагин умеет работать даже с таблицами, имеющими ячейки с параметрами colspan.

В настройках плагина могут изменяться четыре переменные. Вот их названия и тип возможных значений:

  • hoverClass — string — CSS класс, который мы присваиваем ячейкам, когда подсвечиваем их. Значение по умолчанию: hover.
  • eachCell — boolean — подсвечивает колонки таблицы, когда курсор находится над телом или «футером» таблицы. Если параметр отключен, столбцы подсвечиваются только при наведении курсора на заголовок таблицы. Значение по умолчанию: false.
  • includeSpans — boolean — параметр указывает, нужно ли подсвечивать ячейки с параметром colspan. Значение по умолчанию: true.
  • ignoreCols — array — массив чисел. Указывает, какие колонки таблицы не нужно подсвечивать. Индексация начинается с 1! Значение по умолчанию: [].
Илон Маск рекомендует:  Как убрать отступ сверху и снизу от списка

Простая подсветка

Чтобы сделать самую простую подсветку, нужно воспользоваться функцией columnHover()

[code lang=»js»]$(‘#table’).columnHover(); [/code]

Результат демонстрирует подсветку колонок при наведении на заголовки таблицы. Так как мы не указали никаких параметров, скрипт будет работать с настройками по-умолчанию. Из всех ключевых настроек стоит обратить на класс hover, присваиваемый подсвечиваемым клеткам. Таким образом, для подсвечиваемых ячеек нужно задать свои свойства по селектору td.hover (обратите внимание, именно через точку, а не двоеточие).

Первая настройка

Теперь сделаем простую настройку скрипта. Все параметры передаются в JSON-формате.

Мы изменили значение eachCell на true, тем самым включив подсветку при наведении курсора на любую ячейку. Ну а hoverClass изменили на betterhover. Теперь стили подсвечиваемых ячеек стоит описать с помощью селектора td.betterhover.

Работа с collspan

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

Теперь посммотрим, что получится, если мы отключим параметр includeSpans.

Выключение подсветки для заданных колонок

Ну и напоследок проверим работу свойства ignoreCols. Попробуем выключить подсветку для столбцов C+, C-, D+, D-. Они у нас под порядковыми номерами 5, 6, 7, 8. Так и напишем в коде:

Кстати, если добавить ещё подсветку и ячейкам в строке посредством обычного css, получится интересный эффект перекрестия.

Сейчас у нас в стилях находится примерно такой код:

Интерактивная подсветка строк в таблице

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

Для реализации данного решения буду использовать javascript библиотеку jQuery, как наиболее простую и распространенную. Логика работы будет следующей, мы будем отслеживать событие hover на строках таблицы и при его срабатывании присваивать данной строке класс, в котором у нас будет задан цвет подложки. Сразу зададим класс:

Единственный момент, на который я хочу обратить особое внимание, что в моем решении будет исключена первая строка таблицы путем использования селектора not(‘:first’), так как я предполагаю, что это строка является заголовочной и я не хочу, чтобы к ней применялась подсветка. Данный селектор можно или убрать или модифицировать под себя, например, когда в таблице несколько заголовочных строк. Не забываем, что у нас должна быть подключена библиотека jQuery.

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

Название Числовой код Текстовый код Спецсимвол
Перевернутый восклицательный знак ¡ ¡ ¡
Символ цента ¢ ¢ ¢
Символ фунта £ £ £
Символ йены ¥ ¥ ¥
Знак копирайта © © ©
Знак торгмарки ® ® ®
Символ секции § § §

Никого ни к чему не призываю, но хочу напомнить, что сайты надо делать удобными для пользователей. И даже такая мелочь существенно улучшит удобство пользование сайтом. Помните об удобстве посетителей :)

Подсветка строк и столбцов в таблице

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

Если пользоваться стилями CSS, то подсвечиваются только строка и сама клетка (то есть столбец, состоящий из одной клетки).

Как это сделать наиболее просто из JavaScript/JQuery?

1 ответ 1

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками jquery javascript или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.11.35399

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

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

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

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

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

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

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

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

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

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

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

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

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

Код в 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 с новыми цветами.

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

Координатная подсветка в MS Excel

Работа с большими таблицами для бухгалтера — штука привычная. Объемными отчетами здесь никого не удивишь. Читать документы, которые перекрывают площадь современного монитора, бухгалтеру приходится постоянно. И не просто читать, а сверять, анализировать, искать ошибки, выполнять сложную и ответственную работу. Что бы ни говорили, занятие это не из приятных. Просматривать большие документы на экране тяжело. Пробегая взглядом вдоль таблицы, легко «перепрыгнуть» на соседнюю строку и допустить ошибку. В этом смысле с бумажным документом все намного проще — можно положить линейку или же листок бумаги. И тогда работать с таблицей будет удобнее. Многих ошибок удастся избежать. В связи с этим возникает вопрос: как создать такую линейку в MS Excel, чтобы, перемещаясь по листу, подсвечивать строку и колонку для активной ячейки. К сожалению, среди стандартных инструментов такой возможности нет. О том, как исправить эту ситуацию (причем простыми и доступными средствами!), я расскажу в этой статье.

Илон Маск рекомендует:  Неблокирующие межпроцессные коммуникации

Итак, наша цель — построить инструмент, который умеет отслеживать на экране местоположение активной ячейки, выделяя цветом текущую строку и столбец. В результате на листе появится своего рода «координатная линейка», и просматривать таблицу станет намного удобнее. Решить такую задачу можно по-разному. Например, обратиться к языку VBA (Visual Basic for Application) и написать специальную программу. Но я не сторонник этого подхода. И потому предлагаю начать со стандартных возможностей MS Excel.

Способ 1. Используем условный формат
и функцию «ЯЧЕЙКА()»

Для организации координатной подсветки нам нужно решить две проблемы:

1. Как-то определить номер строки и колонки, где находится активная ячейка.

2. Изменить формат этих строк и колонок, чтобы обозначить их на рабочем листе.

Для решения первой задачи мы задействуем функцию « ЯЧЕЙКА() » из стандартной библиотеки MS Excel. После этого, зная номер конкретной строки и колонки, мы применим к ним условное форматирование. Как видите, схема проста. Остается реализовать ее практически. Начнем с функции « ЯЧЕЙКА() ». Она позволяет получить массу полезной информации о любой ячейке рабочего листа. Например, узнать ее высоту, ширину, номер строки или колонки, числовой формат и т. п. У функции два аргумента:

— ключевое слово, это может быть « » строка » » или « » столбец » »;

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

Хитрость состоит в том, что второй аргумент указывать не обязательно. И тогда функция вернет параметры для текущей ячейки. То есть через функцию « ЯЧЕЙКА() » мы сможем определить номер строки и колонки для активной ячейки рабочего листа — именно то, что нам нужно для решения первой задачи.

Переходим к условному форматированию. Этот полезный инструмент Excel позволит нам изменить формат ячеек, если они удовлетворяют определенному условию. Причем (и это очень важно!) условие в данном случае можно задать при помощи формулы. Итак, все инструменты для решения задачи, похоже, у нас есть. Переходим к деталям. Посмотрим, как все это выглядит в программе Excel 2010. Делаем так:

1. Открываем (или создаем новый) документ Excel. Пусть это будет база данных, как на рис. 1.

2. Щелкаем мышкой на ячейке « A1 ».

3. Переходим в меню « Главная ». В группе « Стили » щелкаем на иконке « Условное форматирование » (рис. 2). Откроется меню, как на рис. 3.

4. Из этого меню выбираем пункт « Создать правило… ». Откроется окно « Создание правила форматирования », изображенное на рис. 4.

5. В разделе « Выберите тип правила: » находим вариант « Использовать формулу для определения форматируемых ячеек ».

6. В поле « Измените описание правила: » вводим формулу « =ИЛИ(ЯЧЕЙКА( » строка » )=СТРОКА(A1);ЯЧЕЙКА( » столбец » )=СТОЛБЕЦ(A1)) ».

7. Щелкаем на кнопке « Формат… » (рис. 4). Откроется окно « Формат ячеек », изображенное на рис. 5.

8. В этом окне переходим на закладку « Заливка ». В предложенной палитре выбираем цвет фона. Например, светло-серый вариант.

9. В окне « Формат ячеек » нажимаем « ОК ».

10. В окне « Создание правила форматирования » нажимаем « ОК ». Условный формат для ячейки « A1 » готов. Остается скопировать его на весь рабочий лист.

11. Оставаясь на ячейке « A1 », щелкаем на кнопке « Формат по образцу » (рис. 6).

12. Обводим при помощи мышки (не клавиатуры!) блок ячеек, где нужно создать координатное выделение.

Совет В Excel 2003 (или более ранних версиях этой программы) вызвать инструмент условного форматирования можно через меню « Формат → Условное форматирование… ». После чего в окне настроек установить параметр « Условие 1 » в положение « формула ».

Пару слов о работе формулы и о том, как она связана с условным форматированием. Напомню, что сейчас мы находимся в ячейке « A1 », причем формулу мы записали именно для этой ячейки. Теперь по порядку. Начнем с выражения « ЯЧЕЙКА( » строка » ) ». Поскольку в функции адрес явно не указан, номер строки она определит для активной ячейки рабочего листа. Это значение мы сравним с номером строки для адреса « A1 ». Этот номер нам вернет функция « СТРОКА(A1) ». И тогда, если указатель активной ячейки находится в первой строке рабочего листа, выражение « ЯЧЕЙКА( » строка » )=СТРОКА(A1) » будет истинным. В противном случае эта формула вернет значение « ЛОЖЬ ». Вторая часть формулы, по сути, такая же, только проверяет она номер колонки. То есть выражение « ЯЧЕЙКА( » столбец » ) =СТОЛБЕЦ(A1)) » сравнивает номер колонки для активной ячейки с номером столбца для адреса « A1 ».

Все, что остается сделать, — это объединить оба выражения через операцию « ИЛИ() ». И тогда полученная формула будет означать: «если активная ячейка находится в первой строке или в первой колонке рабочего листа, верни значение « ИСТИНА » и включи инструмент условного форматирования». Для ячейки « A1 » все верно. Остается распространить это правило на всю область рабочего листа. Для этого мы воспользовались иконкой копирования формата ячеек. В этом случае адреса в формуле условного форматирования будут преобразованы по обычным правилам Excel. То есть, при копировании по вертикали поменяются номера строк. При копировании в стороны изменятся номера колонок. Например, формула для условного форматирования ячейки « B1 » станет такой: « =ИЛИ(ЯЧЕЙКА( » строка » )=СТРОКА(B1);ЯЧЕЙКА( » столбец » )= СТОЛБЕЦ(B1)) ». А в результате строка и колонка текущей ячейки поменяет свой цвет. Это и есть координатное выделение, которое мы хотели получить.

Но это еще не все. Дело в том, что правило условного форматирования срабатывает только при обновлении рабочего листа. Например, в момент пересчета формул. Просто перемещение активной ячейки Excel таким обновлением не считает. И поэтому координатная подсветка работать не будет. Для решения проблемы нам придется искусственно обновить лист. Проще всего это сделать при помощи небольшого макроса, добавив его в свойства рабочего листа. Для этого делаем так:

1. Щелкаем правой кнопкой мышки на листе с параметрами условного форматирования. Откроется контекстное меню, как на рис. 7.

2. Из этого меню выбираем пункт « Исходный текст ». Откроется окно редактора Visual Basic.

3. В этом окне вставляем такой текст:

« Private Sub Worksheet_SelectionChange(ByVal Target As Range)

4 . Закрываем окно Visual Basic. На предложение сохранить изменения отвечаем утвердительно.

Важно! Текст модуля на Visual Basic нужно вводить без окаймляющих кавычек.

Теперь при любом перемещении активной ячейки будет активировано условное форматирование, а на листе появится координатное выделение строк и колонок, как показано на рис. 8. Задача решена.

Посмотрим, что мы получили на самом деле, каковы достоинства и недостатки нашего подхода. Вначале о преимуществах, среди которых я бы указал такие:

— инструмент условного форматирования не нарушает функционал таблицы, работают все приемы копирования, перемещения ячеек;

— работа с условными форматами не нарушает форматирование таблицы;

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

— макросы на VBA нужны в минимальном объеме, прикрепить их к рабочему листу не составляет труда.

Что касается недостатков, они тоже есть, в частности:

— формулу для условного форматирования нужно создавать вручную;

— нет способа быстро включить или отключить координатную подсветку на рабочем листе — для этого нужно удалить правило условного форматирования, а это потребует времени;

— при копировании ячеек с других рабочих книг или листов для них придется восстанавливать правила условного форматирования.

На мой взгляд, указанные проблемы не относятся к разряду существенных. По личному опыту скажу, что работа с координатным вычислением на базе условного форматирования не вызывает никаких проблем. Тем не менее имеет смысл посмотреть и на другие способы решения задачи. Чем мы сейчас и займемся.

Способ 2. Применяем надстройку «FollowCellPointer»

В результате пятнадцатиминутного общения с Google я обнаружил по меньшей мере десяток вариантов для реализации координатной подсветки с использованием макросов на VBA. Все они отличались в деталях, но принцип был один: для обозначения строки и колонки эти макросы использовали выделение несвязных диапазонов. В ручном режиме это можно сделать, нажав клавишу « Ctrl », а затем щелчком мышки выделить строку и колонку. Такие варианты я отбросил без сожаления — когда на листе выделен несвязный диапазон, не работают операции копирования и перемещения ячеек. А это — огромный недостаток при работе с таблицей. Да и углубляться в тонкости работы с VBA, откровенно говоря, не хотелось бы. Но одна ссылка меня заинтересовала. Речь шла о готовой надстройке « FollowCellPointer », которую раздает на своем сайте Jan Karel Pieterse (Нидерланды). Продукт этот бесплатный, построен он на макросах Excel и позволяет рисовать на листе графические линии для обозначения строки и колонки активной ячейки.

Илон Маск рекомендует:  Что такое код insendmessage

Прежде чем познакомится с этой программой, ее нужно скачать. Для этого делаем так:

1. Заходим на сайт http://www.jkp-ads.com и щелкаем на гиперссылке « free utilities » (рис. 9). Откроется раздел загрузок, который оформлен в виде таблицы.

2. В предложенном перечне находим программу « FollowCellPointer » (рис. 9) и щелкаем на ссылке левой кнопкой мышки. Через некоторое время в папке загрузок вашего браузера появится файл « followcellpointer.zip ».

3. Копируем этот файл в любую папку и распаковываем его. Все, надстройка готова для инсталляции.

Важно! Для работы с файлом « followcellpointer.zip » на вашем компьютере должна быть установлена программа-архиватор ( WinRar, WinZip или аналогичная).

В подавляющем большинстве случаев такая программа есть. И тогда для распаковки достаточно щелкнуть на имени файла левой кнопкой мышки, затем выбрать из контекстного меню « Извлечь все… » или « Распаковать в текущую папку ». В результате в этой папке появится файл « FollowCellPointer.xla ». Щелчком мышки загружаем его в MS Excel. Надстройка готова к работе.

Важно! Для работы надстройки в Excel 2010 скопируйте файл « FollowCellPointer.xla » в системную папку дополнений MS Office. По умолчанию путь к этой папке выглядит так: « C:Users…AppDataRoamingMicrosoftAddIns ». В этой строке вместо символа « … » нужно поставить имя пользователя для вашей учетной записи Windows.

Дальше делаем так:

1. Открываем или создаем новый документ.

2. Вызываем меню « Файл », затем щелкаем на пункт « Параметры ».

3. В окне настроек Excel переходим в раздел « Надстройки » и нажимаем кнопку « Перейти… » (рис. 10). Откроется одноименное окно « Надстройки », как на рис. 10.

4. В этом окне ставим «галочку» возле строки « FollowCellPointer ».

5. В окне « Надстройки » нажимаем « ОК ».

6. Переходим в меню « Надстройки ». Лента этого меню показана на рис. 11. На ней появится дополнительная группа с иконками: « Enable », « Disable », « Anchor », « ClearAnchor », « Format ».

7. Щелкаем на иконке « Enable ». Возле активной ячейки появятся тонкие линии, как показано на рис. 12. На мой взгляд, весьма изящное решение, вполне заменяет координатную подсветку строк и колонок.

Чтобы отключить этот режим, щелкаем на кнопке « Disable ».

Как и большинство программ, « FollowCell- Pointer » содержит ряд полезных режимов и настроек. Вот основные из них.

Инструмент « Anchor » (рис. 11) позволяет зафиксировать обозначение текущей ячейки, после чего продолжить работу в обычном режиме. Такая возможность полезна, например, при анализе связей между ячейками таблицы. Пример использования режима « Anchor » показан на рис. 13.

Кнопка « ClearAnchor » стирает отметку, сделанную в режиме « Anchor ».

Последней иконкой, относящейся к « FollowCellPointer », является кнопка « Format ». Щелчок на этой кнопке открывает окно « Format Arrows », изображенное на рис. 14. Несмотря на английский интерфейс, здесь все просто. Большинство параметров в этом окне позволяют изменить форму стрелок и линий для отметки текущей ячейки. Приведу вкратце основные настройки, представленные в окне « Format Arrows »:

— « Arrow head style » изменяет форму указателей на линиях, которые ведут к активной ячейке. Возможные варианты: « Diamond » — указатели выглядят как ромбики, « Open » — тонкие стрелки, « Oval » — круглые указатели, « None » — линии будут показаны без указателей, « Triangle » — указатели выглядят как заполненные стрелки (в виде треугольников);

— « Arrow head length » позволяет отрегулировать длину указателей на конце линий. Предусмотрены два варианта: « Short » — короткий, и « Long » — продолговатый;

— « Arrow head width » — здесь можно задать ширину указателя: « Narrow » — тонкий, и « Wide » — широкий;

— « Arrow line width » — этот параметр влияет на толщину линий: « 1 » — тонкая линия, « 2 » — линия с полужирным начертанием;

— « Transparency » изменяет способ рисования линий. Параметр может принимать два значения: « Opaque » — рисовать обычные линии, « Transparent » — рисовать полупрозрачные линии.

Кнопка « Line Color » (рис. 14) позволяет выбрать цвет линии из стандартной палитры MS Excel.

Разумеется, настройка параметров — дело сугубо индивидуальное. Мне понравился вариант с полупрозрачными линиями и округлыми окончаниями. А подробный состав моих настроек выглядит так: « Arrow head length » = « Short », « Arrow head width » = « Narrow », « Arrow line width » = « 1 », « Transparency » = « Transparent ».

На сегодня все. Надеюсь, что материал этой статьи сделает вашу работу с большими таблицами проще и удобнее. До новых встреч!

Жду ваших вопросов, замечаний и предложений на bk@id.factor.ua , nictomkar@rambler.ru или на форуме редакции www.bk.factor.ua/forum .

Наш сайт корисний для вас?

Підписатися на найактуальнішу розсилку для бухгалтера бюджетної установи

CSS Подсветка строки и столбца таблицы не эффективна

Моя проблема в том, что возьмем таблицу в этом вопросе, например, когда мышь переходит от c к b или (или от b к a), подсветка остается в ряду с помощью c, а не перемещается к b или (остается на ряд с б). В принципе, он работает нормально, когда мышь переходит с дна на верх, а не с дна на верх.

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

Применение цвета к чередующимся строкам или столбцам

Примечание: Мы стараемся как можно оперативнее обеспечивать вас актуальными справочными материалами на вашем языке. Эта страница переведена автоматически, поэтому ее текст может содержать неточности и грамматические ошибки. Для нас важно, чтобы эта статья была вам полезна. Просим вас уделить пару секунд и сообщить, помогла ли она вам, с помощью кнопок внизу страницы. Для удобства также приводим ссылку на оригинал (на английском языке) .

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

Вот как это сделать:

Выделите диапазон ячеек, которые нужно отформатировать.

На вкладке Главная выберите команду Форматировать как таблицу.

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

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

Совет: Если вы хотите сохранить стиль таблицы чередование без функциональность таблицы, можно Преобразовать таблицу в диапазон данных. Чередования цвет не продолжится автоматически добавить дополнительные строки или столбцы, но вы можете скопировать дополнительные цветовые форматы в новых строк с помощью формата по образцу.

Применение полос к строкам или столбцам с помощью условного форматирования

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

Вот как это сделать:

На листе выполните одно из указанных ниже действий.

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

Чтобы применить затенение ко всему листу, нажмите кнопку Выделить все.

На вкладке Главная нажмите кнопку Условное форматирование и выберите команду Создать правило.

В списке Выберите тип правила выберите пункт Использовать формулу для определения форматируемых ячеек.

Чтобы применить цвет к чередующимся строкам, в поле Форматировать значения, для которых следующая формула является истинной введите формулу =ОСТАТ(СТРОКА();2)=0.

Чтобы применить цвет к чередующимся столбцам, введите формулу =ОСТАТ(СТОЛБЕЦ();2)=0.

Эти формулы определяют, является ли строка (или столбец) четной или нечетной, чтобы можно было применить соответствующий цвет.

Нажмите кнопку Формат.

В окне Формат ячеек откройте вкладку Заливка.

Выберите цвет и нажмите кнопку ОК.

Выбранный цвет показан в поле Образец. Нажмите кнопку ОК или выберите другой цвет.

Вот как можно изменить правило условного форматирования: щелкните одну из ячеек, к которым оно применяется, на вкладке Главная последовательно выберите команды Условное форматирование > Управление правилами, нажмите кнопку Изменить правило и внесите необходимые изменения.

Чтобы удалить условное форматирование из ячеек, выделите их и на вкладке Главная последовательно выберите команды Очистить > Очистить форматы.

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL