Навигация
Главная
Поиск
Форум
FAQ's
Ссылки
Карта сайта
Чат программистов

Статьи
-Delphi
-C/C++
-Turbo Pascal
-Assembler
-Java/JS
-PHP
-Perl
-DHTML
-Prolog
-GPSS
-Сайтостроительство
-CMS: PHP Fusion
-Инвестирование

Файлы
-Для программистов
-Компонеты для Delphi
-Исходники на Delphi
-Исходники на C/C++
-Книги по Delphi
-Книги по С/С++
-Книги по JAVA/JS
-Книги по Basic/VB/.NET
-Книги по PHP/MySQL
-Книги по Assembler
-PHP Fusion MOD'ы
-by Kest
Professional Download System
Реклама
Услуги

Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
Заказать продвижение сайта
Программа для рисования блок-схем
Инженерный калькулятор онлайн
Таблица сложения онлайн
Популярные статьи
OpenGL и Delphi... 65535
Форум на вашем ... 65535
HACK F.A.Q 65535
Бип из системно... 65535
Гостевая книга ... 65535
Invision Power ... 65535
Пример работы с... 65535
Содержание сайт... 65535
Организация зап... 65535
Вызов хранимых ... 65535
Создание отчето... 65535
Программируемая... 65535
Эмулятор микроп... 65535
Подключение Mic... 65535
Создание потоко... 65535
Приложение «Про... 65535
Оператор выбора... 65535
Модуль Forms 65535
ТЕХНОЛОГИИ ДОСТ... 63010
Имитационное мо... 58334
Реклама
Сейчас на сайте
Гостей: 4
На сайте нет зарегистрированных пользователей

Пользователей: 13,091
новичок: avegraf
Новости
Реклама
Выполняем курсовые и лабораторные по разным языкам программирования
Подробнее - курсовые и лабораторные на заказ
Delphi, Turbo Pascal, Assembler, C, C++, C#, Visual Basic, Java, GPSS, Prolog, 3D MAX, Компас 3D
Заказать программу для Windows Mobile, Symbian

Метод половинного деления для нахождения корня уровнения на Turbo Pascal...
Обратное размещение элементов ЭВС на Delphi + Пояснительная записка
Моделирование работы обрабатывающего участка цеха в GPSS

Реклама



Подписывайся на YouTube канал о программировании, что бы не пропустить новые видео!

ПОДПИСЫВАЙСЯ на канал о программировании
Выделение строк таблицы по клику
Часть 1

Для выделенных строк используется CSS класс selected.

CSS код

tr.selected {
background-color: #fc6;
}

JavaScript код

window.onload = init;

function init() {
var tab = document.getElementById('tab1');

if(!tab) {
return;
}

for(var i=tab.rows.length-1; i>=0; i--) {
tab.rows[i].onclick = rowClick;
}

function rowClick() {
this.className = this.className == "selected" ? "" : "selected";
}
}
Часть 2 — с использованием Prototype

Теперь попробуем сделать то же самое, используя популярную JavaScript-библиотеку Prototype. Функцию $ можно использовать вместо document.getElementById. Удобная функция Element.toggleClassName имеет два аргумента элемент и имя CSS класса, она добавляет CSS класс элементу (если у элемента не было такого класса) или убирает (если был).

CSS код остается прежним.

JavaScript код

window.onload = init;

function init() {
var tab = $('tab1');

if(!tab) {
return;
}

for(var i=tab.rows.length-1; i>=0; i--) {
tab.rows[i].onclick = rowClick;
}

function rowClick() {
Element.toggleClassName(this, "selected");
}
}

Преимущество использования Prototype в данном случае — простая работа с множественными CSS классами, что позволяет легко расширять функциональность (см. часть 3).
Часть 3 — с использованием Prototype и полосатой таблицей

Весьма уместным дополнением может стать полосатая раскраска таблицы. Оказывается, к предыдущему примеру добавить полосатость очень просто. Добавляется (Element.addClassName из библиотеки Prototype) CSS класс even, который присваивается непарным строкам таблицы. А потом CSS класс selected при выделении применяется ко всем строкам таблицы (tr.selected) и "even" строкам (tr.even.selected), чтобы установить цвет выделения "поверх" цвета полос таблицы.

CSS код

tr.even {
background-color: #edf3fe;
}

tr.selected, tr.even.selected {
background-color: #fc6;
}

JavaScript код

window.onload = init;

function init() {
var tab = $('tab1');

if(!tab) {
return;
}

for(var i=tab.rows.length-1; i>=0; i--) {
tab.rows[i].onclick = rowClick;

// Делаем таблицу полосатой
if(i%2==0) {
Element.addClassName(tab.rows[i], "even");
}
}

function rowClick() {
Element.toggleClassName(this, "selected");
}
}


Update: тоже самое, но с использованием DOMAssistant вместо Prototype:

JavaScript код

window.onload = init;

function init() {
var tab = $('tab1');

if(!tab) {
return;
}

for(var i=tab.rows.length-1; i>=0; i--) {
tab.rows[i].onclick = rowClick;

if(i%2==0) {
$(tab.rows[i]).addClass("even");
}
}

function rowClick() {
var row = $(this);

if(row.hasClass("selected")) {
row.removeClass("selected")
}
else {
row.addClass("selected")
}
}
}


Источник: CB's blog
Опубликовал Kest October 27 2008 12:46:02 · 0 Комментариев · 8511 Прочтений · Для печати

• Не нашли ответ на свой вопрос? Тогда задайте вопрос в комментариях или на форуме! •


Комментарии
Нет комментариев.
Добавить комментарий
Имя:



smiley smiley smiley smiley smiley smiley smiley smiley smiley
Запретить смайлики в комментариях

Введите проверочный код:* =
Рейтинги
Рейтинг доступен только для пользователей.

Пожалуйста, залогиньтесь или зарегистрируйтесь для голосования.

Нет данных для оценки.
Гость
Имя

Пароль



Вы не зарегистрированны?
Нажмите здесь для регистрации.

Забыли пароль?
Запросите новый здесь.
Поделиться ссылкой
Фолловь меня в Твиттере! • Смотрите канал о путешествияхКак приготовить мидии в тайланде?
Загрузки
Новые загрузки
iChat v.7.0 Final...
iComm v.6.1 - выв...
Visual Studio 200...
CodeGear RAD Stud...
Шаблон для новост...

Случайные загрузки
Animation (Пример...
Керниган Б.В., Ри...
Векторный редакто...
Калькулятор [Исхо...
Dynamic Titles дл...
IconCut [Исходник...
TMS
Современное проек...
Игра "Астероиды" ...
Правила программи...
Printgrid
Пример OpenGL гра...
FormShape [Исходн...
Battle.Net - мони...
Программирование ...
oTextrackBar
DateEdit
iComm v.6.1 - выв...
Экранная лупа
Экспорт базы данн...

Топ загрузок
Приложение Клие... 100479
Delphi 7 Enterp... 87863
Converter AMR<-... 20082
GPSS World Stud... 13497
Borland C++Buil... 12055
Borland Delphi ... 8668
Turbo Pascal fo... 7048
Visual Studio 2... 5005
Калькулятор [Ис... 4908
FreeSMS v1.3.1 3545
Случайные статьи
Применение подсете...
Помещение лофт в а...
Прочие «примочки»:...
этого службу Telne...
Особенности режима...
Доступ к элементам...
Как писать правиль...
Работайте для дост...
Этап 4 - вынесение...
Сортировка выбором
Эффективные разреш...
SeoSolution
Фильтрация и сорти...
Убрать с экрана пе...
Audit directory se...
Этап 6 - выделение...
Хотя у WWI есть оф...
Сетевые протоколы ...
Помещение модели д...
Текстовое наполнен...
Нерекурсивное пост...
Если ГВС-канал свя...
Вложенные процедуры
Создание потоков с...
Хакинг приставок X...
Статистика



Друзья сайта
Программы, игры


Полезно
В какую объединенную сеть входит классовая сеть? Суммирование маршрутов Занимают ли таблицы память маршрутизатора?