HTML+CSS+JavaScript

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

Так копировать - тоже ж работа.

О! Тема!!! Спасибо большое. Мог бы и сам, просто срочно...

Извините пожалуйста за назойливость...
Дело в том, что посмотрев повнимательней на скрипт, ссылку на который вы мне дали, я понял, что это совсем не то, что мне нужно.

Алгоритм должен быть таким:
1) наступает событие "onmouseover" или "onmouseout" для ячейки таблицы.
2) функция-обработчик хватает id элемента, для которого случилось событие
3) из id вызвавшего элемента при помощи регулярного выражения (по-другому не знаю как проще) вычленяются номер строки и номер столбца.
4) Запускается цикл, в котором все элементы, у которых id содержит номер столбца, взятый из элемента-вызывателя, меняют свойство bgColor на другой цвет.
5) Запускается аналогичный цикл для столбцов.

Собственно вопросы:
1) Как схватить id элемента-вызывателя
2) Какое это регулярное выражение, если id выглядят следующим образом: "rX_cY", где X и Y - номера соответственно, строки и столбца.

Люди, я понимаю, что в конец обнаглел, но сам я не могу это ослить. Ява-скрипт - это явно не мое....

Наверное, проблема в том, что число строк переменное? В остальном не вижу причины устраивать цикл. А потому лениво его делать :)
Цикла по строкам можно избежать, если менять класс у выбранной строки (TD). Я делал поначалу так, но текущее решение короче.

проблема в том, что количество строк, как, впрочем, и столбцов ОГРОМНОЕ! Сам текст таблицы я делал скриптом. Посему, каждая ячейка имеет свой id, например, такой: id="r0_c5".

>Цикла по строкам можно избежать, если менять класс у
>выбранной строки (TD).

Вероятно, имелось ввиду TR?

Уточню немного задачу. Просто было бы сделать так, как предложено в скрипте по ссылке, если бы табличка была размером ну, пускай 5х10. А она у меня: 15строк на 25 столбцов! Если для каждого создавать по два дополнительных класса, как делаете вы у себя, то CSS распухнет больно. В данном случае, нужно делать так, или почти так, как я описывал. Вопрос для меня состоит в том, что я тугой в этом месте и не понимаю КАК это написать. Знаю что, знаю, что сама функция будет строчек 15, но написать их я не могу пока.

Повторю вопросы:
- как можно узнать id элемента, который вызвал функцию?
- как выглядит регулярное выражение для извлечения из этого id номеров строки и столбца?

Очень надеюсь на вашу помощь.

Если число строк огромное, то тем более надо избегать скриптов цикла по строкам - представляешь, сколько бы он работал? Или нужна оптимизация - окрашивать только в пределах видимости.
Да, TR.
event.parentNode.className=...; - окраска строки, тогда классы описать только по столбцам.
15 - не такое уж огромное, я представил, что 10000. И 25 столбцов при 8-10 символах в CSS на столбец - разве это много?

Ответы: 1) event.srcElement.id / event.target.id ;
2) thisId.replace(/-.+/,"") - номер строки; /[^_]+_/,"" - номер столбца.

Спасибо большое. Уже почти все работает. То есть, выделяет строку. Замечательно. Для выделения столбца текущего, нужно всетки перебирать цикл. А от сюда...
Вопросы с регулярными выражениями. Символы, внутри них - это только наполнение? Потому что если нет, то оно вообще отказывается работать. Если не наполнение, то чет оно тоже не работает. Повторюсь, формат id такой: r14_c12. Нельзя ли конкретизировать регэксп? Спасибо заранее.

ЗЫ. Всетаки хорошо, что есть форум, на котором отвечают даже на такие дибильные вопросы, да еще быстро и без фраз типа "Ну уморил! Ну и ламер!%)" Респект всем, кто помогает учащимся!

curid=event.srcElement.id; row=curid.replace(/r/,""); row=parseInt(row); cell=curid.replace(/r\d_c/,""); cell=parseInt(cell);

Так я получил номер ячейки и строки. Теперь цикл... Строка выделяется переключаемыми стилями. Посмотрим дальше...

Да но это для IE - event.srcElement . Чтобы и для FF, см., как я в примере делал.

<script>alert("r14_c12".match(/\d+/g))</script> - так сразу массив "строка-столбец".


Ид-ы, всё же, идеологически неверно. Привыкай к классовому мышлению. Достаточно знать, какого класса ячейка, так тут же новый цвет ей приклеиваешь.

Если бы дело не касалось Оперы, можно было бы применить динамические стили. Назначаешь стиль столбцу нужного класса. А циклы - это всё мелкобуржуазно...

Да. Скрипт заработал, но только под IE. Под FF не идет. Видел как у тебя в скрипте. Ща попробую у себя так сделать....

Щас такой расклад: событие вызывает функцию, с аргументом - именем класса. Этот класс присваивается всем ячейкам, которые нужны.

Ща попробую отладить.

Кстати, под FF все летает, а под IE подтормаживает... неужто из-за цикла? Не может быть! Всего 14 итераций! Или из-за GetElemenById?

На тему кроссбраузерности:
Строка:

t=d.all?event.srcElement:ev.target;

Как взять ev? В скрипте фраза:

d.onmouseout=d.onmouseover=function(ev)

мне не очень ясна. В принципе, мне нужно получить значение этого самого ev. Как это попроще?

ev - это параметр функции=обработчика, который действителен в FF и равен объекту Event . Так что он уже есть, получать не нужно.

Если у тебя в атрибуте тега - onmouseover=... , то надо писать иначе:

<td onmouseout=ff(event, др.параметры)   onmouseover=onmouseout=ff(event, др.параметры) > ... ff=function(ev){...t=d.all?ev.srcElement:ev.target; ...}

Как видишь, намного больше писать. Хотя, можно

<td onmouseout=ff(event,this, др.параметры)   onmouseover=onmouseout=ff(event, this, др.параметры) > ... ff=function(ev,t, др.){...t уже имеем. он не всегда target, но всё равно то, что нужно...}

d.onmouseout=d.onmouseover=function(ev) - это присваивание функции 2 обработчикам прерываний

Большое спасибо за поддержку. Написал. Правда, подтормаживает, но ничего. Полный код выглядит так:

<style>     .selected    {background-color:silver;}     .notselected    {background-color:wite;} </style> <script language="javascript"> function select_all(id,needclass)    {   cell=id.replace(/r\d+_c/,"");   cell=parseInt(cell);     for (var i=1;i<15;i++)    {     var obj=document.getElementById("r"+i+"_c"+cell);     obj.className=needclass;     } } function chClass(needclass)    {    this.className=needclass; } </script>

Еще раз большое спасибо. Этот форум - просто счастье для чайников типа меня!

Это только скрипт, а в каждой ячейке нужно

<td id=r10_c12 onmouseover=select_all(this,"selected") onmouseout=select_all(this,"notselected")>

По 30 обращений к объекту документа на каждое движение - конечно, много, поэтому притормаживает.

А если сделать массив всех обрабатываемых элементов при загрузке страницы, а потом гонять цикл только по ним?

При этом будет стационарным столбец, а строка будет шевелиться.

Будет меньше тормозить?

ЗЫ. Кста, в Oper'e и в FF идет гораздо быстрее! В FF вообще летает!

Dc' равно, ощутимое время занимает обращение к объекту документа (к тому же, с визуальным эффектом).

Поэтому с классом лучше - обращается за 1 раз. Устройте для IE динамические стили, так, чтобы Опера с ними не работала. Как с ними работать - здесь: