Выделение строк таблицы по клику - Сайтостроительство .:: CodingRUS ::. программирование по-русски на Delphi, C++, PHP, Prolog, GPSS

Услуги

• Автоматическое добавление статей на сайты на Wordpress, Joomla, DLE
• Заказать продвижение сайта
• Программа для рисования блок-схем
• Инженерный калькулятор онлайн
• Таблица сложения онлайн

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

OpenGL и Delphi...		65535
Форум на вашем ...		65535
21 ошибка прогр...		65535
HACK F.A.Q		65535
Бип из системно...		65535
Гостевая книга ...		65535
Invision Power ...		65535
Пример работы с...		65535
Содержание сайт...		65535
ТЕХНОЛОГИИ ДОСТ...		65535
Организация зап...		65535
Вызов хранимых ...		65535
Создание отчето...		65535
Имитационное мо...		65535
Программируемая...		65535
Эмулятор микроп...		65535
Подключение Mic...		65535
Создание потоко...		65535
Приложение «Про...		65535
Оператор выбора...		65535

Микрозаймы на карту онлайн топ 45 займы на карту.

Сейчас на сайте

Гостей: 10
На сайте нет зарегистрированных пользователей

Пользователей: 13,372

новичок: vausoz

Новости

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

Моделирование процесса обработки заданий пакетным режимом работы с квант...

Моделирование работы узла коммутации сообщений на GPSS + Пояснительная з...

моделирование процесса поступления заявок в ЭВМ на GPSS + Пояснительная ...

Выделение строк таблицы по клику

Часть 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 09:46:02 · 0 Комментариев · 9500 Прочтений ·

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

Комментарии

Нет комментариев.

Добавить комментарий

Рейтинги

Рейтинг доступен только для пользователей.

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

Нет данных для оценки.

Гость

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

Забыли пароль?
Запросите новый здесь.

Поделиться ссылкой

• Фолловь меня в Твиттере! • Смотрите канал о путешествиях • Как приготовить мидии в тайланде?

Загрузки

Новые загрузки

Случайные загрузки

Топ загрузок

Приложение Клие...	100774
Delphi 7 Enterp...	97839
Converter AMR<-...	20268
GPSS World Stud...	17014
Borland C++Buil...	14193
Borland Delphi ...	10293
Turbo Pascal fo...	7374
Калькулятор [Ис...	5984
Visual Studio 2...	5207
Microsoft SQL S...	3661