|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
19.12.2011, 07:25 | #1 |
Пользователь
Регистрация: 24.02.2011
Сообщений: 20
|
[Javascript] Выделение строки и столбца относящихся к ячейке таблицы
Всем гуру здрасте
Прошу помочь в доведении до ума одной маленькой задачи. Извиняюсь что отвлекаю. Заранее спасибо Дано: Таблица неизвестной длинны(задаётся пользователем), которая строится с помощью php. Верхняя строчка и первый столбец - элементы th, остальные - td. По элементы, находящиеся по диагонали (строка 1, столбец 1; строка 2, столбец 2 и тд.) имеют класс "cross" и покрашены в другой цвет. Пример(заполнено значениями таблицы умножения для наглядности): http://i068.radikal.ru/1112/93/cd2e238be2d1.png Задача: 1)При наведении на ячейку таблицы соответствующая строка и столбец должны выделяться(менять цвет фона). 2)Выделение должно происходить только слева и сверху до выбранной ячейки. Остальные ячейки должны остаться не тронутыми. 3)Строчки заголовков(th) и выбранная ячейка должны быть выделены другим цветом, отличным от цвета выделения. 4)При клике мышкой на ячейку положение должно зафиксироваться и не меняться. При повторном клике на любой ячейке фиксация убирается и все возвращается в нормальное положение. Пример: http://s014.radikal.ru/i329/1112/36/4bc26fa9f5db.png (выделен 4 столбец 9 строчки) Решение: Создаём 3 функции select, unselect, click. С двумя входными параметрами (строкой и столбцом). Подписываемся на события onMouseOver, onMouseOut, onClick у элементов <td>. Дабы выделить что-то, передаём функции номер строки и столбца ячейки, в которой возникло событие onMouseOver. Далее проходим по циклу по каждому столбцу и строке и задаём им другой цвет фона, до того момента пока не достигнем выбранного столбца. Отдельно красим элементы th и саму ячейку. При генирации onMouseOut вызываем ф-ю unselect передавая так же номер строки и столбца и таким же образом как и в первом случае красим все остальные ячейки в стандартный цвет. Далее, нужно определить ячейки которые стоят по-диагонале и вернуть им изначальный цвет, который мы убрали при выделении. Ну и последняя задача - фиксирование. Создаём глобальную переменную selected булевского типа, инициализируем значением false. при событии onClick вызываем ф-ю click(): 1)меняем значение переменной на обратное 2) если выделено - запоминаем строчку и столбец (в глобальные переменные), иначе - вызываем unselect по запомненным ранее координатам и выделяем текущий. Код:
Конкретно беспокоит что каждой ячейки таблицы нужно задавать своё значение id и работать через него. Может у кого-нибудь есть другие варианты как обойтись без этого? |
19.12.2011, 15:32 | #2 |
Форумчанин
Регистрация: 26.04.2010
Сообщений: 450
|
Сразу скажу, я не гуру) Может быть следующий код будет Вам полезен
Код:
Тишина – самый громкий звук
Последний раз редактировалось nerv; 19.12.2011 в 15:38. |
19.12.2011, 16:45 | #3 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Если бы только наведение, то было бы проще, через цсс:
Код:
С кликами (переключениями режима) — можно поэкспериментировать с другими псевдоклассами типа :focus, :active.
Alar, верни репу!
|
19.12.2011, 18:52 | #4 | ||
Пользователь
Регистрация: 24.02.2011
Сообщений: 20
|
2nerv
Цитата:
2Naive Цитата:
Последний раз редактировалось irt; 19.12.2011 в 18:54. |
||
19.12.2011, 20:58 | #5 |
Форумчанин
Регистрация: 26.04.2010
Сообщений: 450
|
Примерно как-то так. Снятие выделения не отрабатывал. Пока только F5.
Код:
Тишина – самый громкий звук
|
22.12.2015, 22:59 | #6 |
Форумчанин
Регистрация: 22.12.2015
Сообщений: 119
|
подсчитать количество выделенных ячеек
здравствуйте! а как подсчитать количество выделенных ячеек в таблице?
Код:
Последний раз редактировалось leon2009sp; 22.12.2015 в 23:01. Причина: заменил php на code |
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Выделение цветом столбца и строки активной ячейки | cerberochek | Microsoft Office Excel | 7 | 28.11.2012 12:56 |
Выделение столбца, включающего объединенные ячейки | jimmyyong | Microsoft Office Excel | 1 | 18.11.2010 01:46 |
Определение названия столбца по ячейке | lohmatiy | БД в Delphi | 2 | 13.05.2010 03:24 |
Выделение диапазона по наличию в ячейке (ячейках) текста или метки | as-is | Microsoft Office Excel | 7 | 08.03.2010 18:09 |
Выделение последнего столбца в таблице | Busine2009 | Microsoft Office Word | 2 | 26.05.2009 07:20 |