VPF::Перемещение в таблице при нажатии на стрелки

Китти

Дата 13.2.2007, 21:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 16.4.2006

Репутация: нет
Всего: нет

Есть таблица, в которой первая строка выделена другим цветом. Надо сделать так, что бы при нажатии на клавиатуре стрелочки вниз выделение перемещалось на строку вниз, а при нажатии стрелки вверх, соответственно, на одну строчку выше. Пыталась отловить событие onkeydown как строки, так и таблицы, но не могу получить предыдущую или следующую строку. Помогите, пожалуйста! Уже не первый день бьюсь. smile

12345c

Дата 13.2.2007, 22:11 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Код

<table cellspacing=2 style="width:300px;border:1px solid">
<tr id=tr1 style="background-color:#f4f4f4"><td>1</td></tr>
<tr id=tr2><td>2</td></tr>
<tr id=tr3><td>3</td></tr>
</table>
<script>selStr=1;
document.onkeydown=function(ev){
  ev=ev||event;
  if(ev.keyCode==38&&selStr<=1)return;
  if(ev.keyCode==40&&selStr>=3)return;
  if(ev.keyCode==38){
    document.getElementById('tr'+selStr).style.backgroundColor='transparent';
    selStr--;
    document.getElementById('tr'+selStr).style.backgroundColor='#f4f4f4';
  }
  if(ev.keyCode==40){
    document.getElementById('tr'+selStr).style.backgroundColor='transparent';
    selStr++;
    document.getElementById('tr'+selStr).style.backgroundColor='#f4f4f4';
  }  
}
</script>

А ещё лучше сделать это через классы, чтобы из скрипта убрать привязку к цвету.

Китти

Дата 13.2.2007, 22:55 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 35
Регистрация: 16.4.2006

Репутация: нет
Всего: нет

Огромное спасибо за помощь!!!

pythonwin

Дата 14.2.2007, 07:16 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник
Сообщений: 2529
Регистрация: 18.4.2006
Где: за компом

Репутация: 1
Всего: 36

Цитата(Китти @ 14.2.2007, 01:55

)

Огромное спасибо за помощь!!!

12345c, ++1 smile

--------------------

портал по Python
раздел на винграде по Python
язык Python

Sanchezzz

Дата 1.8.2008, 14:41 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1670
Регистрация: 19.11.2006
Где: Voronezh

Репутация: 3
Всего: 60

а как можно сделать это без ID элементов ?
а то если страница большая большой JS получается

а то под файловый менеджер не прикрутить...

Присоединённый файл ( Кол-во скачиваний: 3 )

myCMS_Filemenager.JPG 42,01 Kb

--------------------

Понравился ответ "+" по репе, не забываем закрывать тему, заказы в LS.

bars80080

Дата 1.8.2008, 16:17 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315

Код


<table id="tab1" cellspacing=2 style="width:300px;border:1px solid">
<tr style="background-color:#f4f4f4"><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
<script>
var tid = document.getElementById('tab1').getElementsByTagName('tr');
var tln = tid.length;
var selStr = 1;

document.onkeydown=function(ev) {
    ev=ev||event;
    if(ev.keyCode == 38 && selStr <= 1) return;
    if(ev.keyCode == 40 && selStr >= 3) return;
    if(ev.keyCode == 38) {
        if(selStr < 0) return;
        tid[selStr - 1].style.backgroundColor = 'transparent';
        selStr--;
        tid[selStr - 1].style.backgroundColor = '#f4f4f4'; }
    if(ev.keyCode == 40) {
        if(selStr >= tln) return;
        tid[selStr - 1].style.backgroundColor = 'transparent';
        selStr++;
        tid[selStr - 1].style.backgroundColor = '#f4f4f4'; }}
</script>

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »