Форум PHP программистов > Перемещение по таблице

[ Поиск ] - [ Пользователи ] - [ Календарь ]

pavel24071988

21.09.2011 - 13:24

Здравствуйте.

У меня есть таблица (создаётся динамически)

На onclick у меня выделяются цветом строчки. Мне же нужно перемещатся по таблице стрелочками с клавиатуры - key.Code = 38... - с таким же выделением цветом строчек.

Я сейчас заключил таблицу в форму и пытаюсь по событию....:


<form onkeypress="if(event.keyCode==38){f_focus();}" >
//Моя таблица
</form>

onkeydown тоже не работает...

--- Но по нажатию на стрелочку "вверх" ничего не происходит


    function f_focus(){
    alert("qwwqe");
    }

Мне кажется что моя форма не становится "активной" (как то так) - я просто тогда не знаю как её сделать активной.

--- Может быть рассматривались подобные проблемы, я не нашел... - Посоветуйте если можно где про данную "навигацию" посмотреть.

Заранее спасибо...

Спустя 3 минуты, 17 секунд (21.09.2011 - 12:27) kirik написал(а):

pavel24071988
Попробуйте onkeypress на body повесить.

Спустя 49 секунд (21.09.2011 - 12:28) ApuktaChehov написал(а):

Ну здравствуйте, в очередной раз

Повесьте событие на документ.

kirik - опередил. Или я тормоз или ты газ

Спустя 5 минут, 23 секунды (21.09.2011 - 12:33) pavel24071988 написал(а):

Да на body - то работает (что ж я совсем

)

У меня на странице две таблицы (может будет 3-я) Такая навигация нужна на кождой....

Подразумевается что по нажатию на таблицу человек активирует нужную форму-таблицу и в ней уже жмет нужный keyCode

Спустя 2 минуты, 43 секунды (21.09.2011 - 12:36) kirik написал(а):

Цитата (pavel24071988 @ 21.09.2011 - 05:33)

У меня на странице две таблицы (может будет 3-я) Такая навигация нужна на кождой....

Подразумевается что по нажатию на таблицу человек активирует нужную форму-таблицу и в ней уже жмет нужный keyCode

повесьте onclick на таблицу, который будет сообщать скрипту, с какой таблицей человек работает в данный момент (и где, собственно, двигать рамку).

ApuktaChehov
Обошёл на минуту

Спустя 5 минут, 57 секунд (21.09.2011 - 12:42) pavel24071988 написал(а):

Я сейчас делаю активной форма (по нажатию Enter нужно было) Так там input type=text Там форма становится активной при внесении чего - нибуль в text И при


<form onkeypress="if(event.keyCode==38){f_focus();}" >
//Моя таблица
</form>

все отрабатывает

Здесь же нет ничего кроме простых tr и th

Так не прокатывает


<table width="100%" id="tbb" class="zagolovok" onkeydown="if(event.keyCode==38){f_show();}">

Или как-то по другому нужно?

Спустя 11 минут, 12 секунд (21.09.2011 - 12:53) ApuktaChehov написал(а):

Как бы сделал я?

Повесил бы на таблицу онклик, при котором она как-нибудь выделялась бы.
Так же при клику на нее, можно было бы создать экземпляр класса для этой самой таблицы. Этот экземпляр будет работать с конкретной таблицей.

Если у вас не ООП, то можно в глобальную переменную загнать таблицу(как объект ДОМ), а функция будет с ней уже работать. Таким образом, сколько бы у вас не было таблиц, функция будет работать только с выделенной. А что бы ее выделить,нужно на нее кликнуть.

Вот как-то так.

Спустя 22 часа, 41 минута, 8 секунд (22.09.2011 - 11:34) pavel24071988 написал(а):

А все-таки есть где-нибудь примеры такой навигации?
Мне бы очень это пригодилось бы

Спустя 5 минут, 57 секунд (22.09.2011 - 11:40) ApuktaChehov написал(а):

pavel24071988 - а чего там сложного?

Кликаем на таблицу. Она у нас активна.
Дальше при нажатии на кнопку вверх или вниз, бежим по строкам таблицы, смотри какой у них класс(предполагается что выделенная строка таблицы имеет отличный от не выделенных строка класс). Если ни у одной строки активного класса нет, значит выделяем первую строку. А если найдена такая строка, то в зависимости от того, какая кнопка нажата выделяем следующую или предыдущую строку.

Спустя 18 минут, 12 секунд (22.09.2011 - 11:58) pavel24071988 написал(а):

Ну вот как например сделать "активной таблицу"?
У меня сейчас выделяются цветом строчки таблицы на onclick по ним с помощью классов. И я думаю заставить класс выделить строку таблицы с определенным ID мною будет возможно -> (id будет изм. взависимости от keyCode...?)
Я так понимаю должно быть как - то так (заранее извеняюсь за бред)


<form id = "form1" onclick = "f_focus()">
//Таблица
</form>


function f_focus(){
if(document.getElementById('form1').onkeydown == keyCode... /*очень затрудняюсь что либо написать*/      ){
/*Class*/ = /*выделить строчку*/
}
}

Я этот этап очень сложно себе представляю

Спустя 28 минут, 10 секунд (22.09.2011 - 12:27) ApuktaChehov написал(а):

Ух. Я надеялся, что вы уже хоть что-то сделал. А вы совсем еще в начале.

Ну что же. Начнем с начала. Для начала будем работать только с одной таблицей.

Первое что нужно сделать, так это принять код нажатой кнопки. Для этого нужно повесить событие на тег body. Итак:

<body onkeyup = "f_focus(event);">

Отлично, теперь при нажатии на любую кнопку в функцию f_focus(event) мы передали событие.

Теперь определим, чего же за кнопочка была нажата:

var key_id = event.keyCode;

Определяем переменную для хранения активной строки:

var this_obj = null;

Теперь подтянем(за уши) нашу таблицу:

var table = document.getElementById('table');

Теперь формируем список строк:

var tr_list = table.getElementsByTagName('tr');

А теперь бежим по всем строкам циклом:

for(i = 0; i < tr_list.length; i++) {
            //ищем нашу выделенную строку
            if(tr_list[i].className == 'active')
                this_obj = tr_list[i];
        }

Продолжение следует...

Спустя 8 минут, 31 секунда (22.09.2011 - 12:35) pavel24071988 написал(а):

Ух круть....

Спустя 4 минуты, 39 секунд (22.09.2011 - 12:40) ApuktaChehov написал(а):

Надоело мне писать.
Вот код с комментариями:

function f_focus(event) {
        var key_id   = event.keyCode; //номер кнопки
        var obj_id   = null; //номер кативной строки
        var table    = document.getElementById('table'); //таблица
        var tr_list  = table.getElementsByTagName('tr'); //список строк
        
        //Определяем порядковый номер активной строки
        for(i = 0; i < tr_list.length; i++) {
            if(tr_list[i].className == 'active') {
                obj_id = i;
                break;
            }
        }
        
        if(obj_id != null) {
            //Кнопка вниз и следим, что бы номер строки не вылезал за пределы существующих
            if(key_id == 40 && obj_id < tr_list.length-1) {
                tr_list[obj_id].className = 'passive';
                tr_list[obj_id+1].className = 'active'; //выделяем следующую строку
            }
            
            //Кнопка вверх и следим, что бы номер строки не вылезал за пределы существующих
            if(key_id == 38 && obj_id > 0) {
                tr_list[obj_id].className = 'passive';
                tr_list[obj_id-1].className = 'active'; //выделяем предыдущую строку
            }
        }else
           tr_list[0].className = 'active'; //выделяем первую строку
	}

<body onkeyup = "f_focus(event);">
<table width="100%" border="1" id="table">
    <tr class="passive">
        <td>1</td>
    </tr>
    <tr class="passive">
        <td>2</td>
    </tr>
    <tr class="passive">
        <td>3</td>
    </tr>
    <tr class="passive">
        <td>4</td>
    </tr>
    <tr class="passive">
        <td>5</td>
    </tr>
</table>
</body>

Под FF работает, по другими не тестил, времени нету, убегаю, но скоро вернусь.

Спустя 1 минута, 14 секунд (22.09.2011 - 12:41) pavel24071988 написал(а):

Супер. То что нужно

Быстрый ответ:

Здесь расположена полная версия этой страницы.