Forum Webscript.Ru
Программирование => JavaScript & JScript => Тема начата: C++ от 30 Июня 2003, 15:21:14
-
Есть таблица с большим количеством строк, в каждой строке таблицы есть вызов функции на события onMouseOver и onMouseOut. Функция меняет цвет строки.
| TEXT |
Можно ли как либо занести это свойство в CSS, чтобы не печатать эту конструкцию ( onMouseOver=tron(this,\'#FFFFFF\'); onMouseOut=change(this,\'#000000\'); [\\B] ) в каждой строке, а напечатать только ...
?
Спасибо!
-
C++
Слушай меня внимательно:
Не знаю как насчет CSS (посмотри на http://loc.stack.ru/projects/CSS2/cover.html), а в JavaScript\' это можно организовать следующим образом.
1. Вариант.
Можно взять свойство
var text = document.body.innerHTML;
затем в цикле при помощи функций indexOf(\'
2. Вариант.
на события document.onmouseover и document.onmouseout, повесь следующую функцию.
document.onmouseover = eventHandler;
document.onmouseout = eventHandler;
// Для начала определи браузер (для совместимости)
agent=navigator.userAgent.toLowerCase()
// Установка флагов браузеров
op=agent.indexOf("opera")>-1 && window.opera
ie = (agent.indexOf("msie")>-1 && !op)
mz=(agent.indexOf("gecko")>-1 || window.sidebar)
/* function eventHandler()
Функция вещается на нужные нам обработчики событий и в соответствии с типом
события передает его тому или иному объекту */
function eventHandler(e)
{
// В IE обратится к объекту событие надо так e = window.event,
// а в MZ,OP этот объект передается в функцию в виде аргумента.
if(ie) e = event;
// объект на котором произошло событие тебе надо определить строку, верно?
var obj = (ie?e.srcElement:e.target);
// В MZ быстрее всего элемент на котором произойдет событие будет #text поэтому нам нужен его родитель
if(obj.nodeName=="#text") obj = obj.parentNode;
// Но и это не все, т.к. быстрее всего таким образом ты достучишся до ячейки, а нужна строка, значит нам опять нужен родитель
if(obj.nodeName=="TD") obj = obj.parentNode;
// Если это строка
if(obj.nodeName == "TR")
{
if(e.type =\'mouseout\') obj.style.background-color = \'#000\';
if(e.type =\'mouseover\') obj.style.background-color = \'#FFF\';
}
}
// Установка обработчиков событий
window.onresize = eventHandler;
Во я тут дочитал вопрос до конца. Посмотри в документацию по CSS смотри ссылку вверху, я там что-то подобное видел.
в любом случае удачи в нелегком труде програмиста :)
Nickii
-
Просмотри
5.11.3 Динамические псевдоклассы: :hover, :active и :focus
http://loc.stack.ru/projects/CSS2/selector.html#dynamic-pseudo-classes
Возможно это то чего тебе нужно.
Nickii
-
-
Alexandr
Абсолютно то-же, к тому же не совсем корректно. Работать будет только под IE и не для строк, а для ячеек.
-
Привет.
Сделал как написано в первом посте, но все равно не работает:(
При ресайзе окна выдает ошибку (14,2) - требуется объект.
Вот код, который я тестировал.
stroka |
stroka |
stroka |
stroka |
А можно скрипт как-нибудь модифцировать, чтобы он реагировал не только на тег TR, а на любой тег с id=change?
Что-то вроде вот этого, но тоже не работает.
В принципе мне не обязательно, чтобы он работал во всех броузерах, достаточно и IE.
Спасибо
-
Спасибо всем, кто откликнулся!
Вот собрал полностью готовый вариант!
TABLE HEAD |
TR1 |
TR1 |
TR2 |
TR1 |
TR3 |
TR1 |
С удовольствием выслушаб критику по поводу совместимости с другими броузерами, кроме IE. Просто нет возможности проверить.
-
не используй id, используй классы: по правилам одинаковые id не допускаются
а лучше используй два класса, отличающихся только параметров color - тогда меньше придется мучатся, если захочешь цвета поменять
-
Xander
А как до свойства class добраться?
Мне в принципе так и надо сделать....
Но, только когда я делаю так:
TABLE HEAD |
TR1 |
TR1 |
TR2 |
TR1 |
TR3 |
TR1 |
Браузер пишет: Предполагается наличие объекта указывает на строку
-
Вопрос снят.
Пошел учить JavaScript! :)
Надо так:
TABLE HEAD |
TR1 |
TR1 |
TR2 |
TR1 |
TR3 |
TR1 |