Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Перемещение в таблице при нажатии на стрелки

Автор: Китти 13.2.2007, 21:51

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

Автор: 12345c 13.2.2007, 22:11

Код

<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

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

Автор: pythonwin 14.2.2007, 07:16

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

)

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

12345c, ++1 smile

Автор: Sanchezzz 1.8.2008, 14:41

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

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

Автор: bars80080 1.8.2008, 16:17

Код


<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>