Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Подсветка столбцов таблицы (https://javascript.ru/forum/dom-window/15528-podsvetka-stolbcov-tablicy.html)

ctocopok 02.03.2011 21:57

Подсветка столбцов таблицы
 
Сделать подсветку строчек не проблема - onMouseOver и onMouseOut для <tr> спасают вебмастера.

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

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

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

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

Заранее благодарен.

Aetae 03.03.2011 00:12

1.
<table style="width:100%;">
	<col style="background:#ddf">
	<col style="background:#fdf">
	<col style="background:#dff">
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
	<tr><td>1</td><td>2</td><td>3</td></tr>
</table>


2. http://www.imaputz.com/cssStuff/bigFourVersion.html

ctocopok 03.03.2011 01:15

Спасибо за решение с col style="", возможно, действительно обойдусь без наворотов ява-скрипта.
Хотя, задавая вопрос, предполагал именно динамическое выделение, по наведению курсора.

второй пункт еще не отсмотрел, но заранее благодарен :)

ctocopok 03.03.2011 02:18

Йолке!
Красивое решение по фиксированным заголовкам. Но в моем случае ползет и разъезжается. Теряется синхронизация заголовка с данными таблицы, двустрочные (rowspan="2") заголовки тоже по ветру пошли.

http://wwoott.narod.ru/scroll.html со скроллом (фикс. заголовки)
http://wwoott.narod.ru/noscroll.html без скролла (как раньше было)

может, я что-то очень важное в CSS упустил, но что?

ksa 03.03.2011 09:03

ctocopok, может уже пора тут тестовые примеры свои выкладывать? Или все делать за тебя?

Андрей38 03.03.2011 10:32

http://www.scriptsite.ru/jquery-18 Скрол для таблици с фиксир заголовками ... Ниче коректно не работает ! Нужно превращать head th в фиксированные дивы . Читал , что Квери плагин сортировки таблиц имеет такие юсер-установки . Но я так и не понял , как это установить . По умолчанию- заголовки- как табл.заголовки

ctocopok 03.03.2011 11:11

Цитата:

Сообщение от ksa (Сообщение 94717)
ctocopok, может уже пора тут тестовые примеры свои выкладывать? Или все делать за тебя?

не понял. в чем меня обвиняют?

тестовые примеры - по ссылкам, обширные таблицы.

в таблице 35 столбцов, как только задаешь thead tr блочным элементом, "синхронизация" координат со столбцами слетает.

ksa 03.03.2011 11:27

Цитата:

Сообщение от ctocopok
в чем меня обвиняют?

В личном бездействии в решении твоеё же проблемы. :D

Цитата:

Сообщение от ctocopok
тестовые примеры - по ссылкам, обширные таблицы.

А ты сделай небольшей тестовый пример, выложи тут. На нём можно будет вести какие-то тесты...

Цитата:

Сообщение от ctocopok
в таблице 35 столбцов, как только задаешь thead tr блочным элементом, "синхронизация" координат со столбцами слетает.

Не делай thead tr блочным элементом... :D

ctocopok 03.03.2011 11:32

Да не, я не бездействую, я пыжусь локально, только не получается, к сожалению.

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

3. не делать thead tr блочным - это не иметь фиксированного на месте заголовка. смысл всей возни именно в таком заголовке. правда, загляните в две ссылки, станет понятно, с чем я имею дело, и что плохо получается

ksa 03.03.2011 14:01

Цитата:

Сообщение от ctocopok
но какая разница, тут пример, или те линки, что я выложил повыше?

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

Цитата:

Сообщение от ctocopok
не делать thead tr блочным - это не иметь фиксированного на месте заголовка.

Не всегда всё бывает так однозначно...


Часовой пояс GMT +3, время: 00:46.