Arkanis Development

Styles

Navigate through table rows using the keyboard

Published

This post is written in German

Eines meiner "liegen gebliebenen" Projekte hab ich jetzt endlich soweit fertig: Navigate through table rows using the keyboard (englisch).

Dabei handelt es sich um ein kleines jQuery (JavaScript Framework) Plugin, das die Arbeit mit Tabellen auf Websiten erleichtert. Man kann die Tabellenzeilen mit den Pfeiltasten durchgehen und mit der Return-Taste quasi die aktuelle Zeile "öffnen". Wenn man eine Zeile geöffnet hat, sich aber doch nicht dafür interessiert, kann man mit der Rücktaste (Backspace) wieder zu der Tabelle zurück und schnell die nächste Zeile markieren und "öffnen". Mit einfachen Klicks (Zeile markieren) und Doppelklicks (Zeile öffnen) kann man auch sinnvoll arbeiten. Die Beispielseite demonstriert die Nutzung recht gut… hoffe ich jedenfalls.

Die Idee kam von meinem Freund Florian Seefried während eines längeren Skype-Telefonates am Abend. Er arbeitet gerade an einer Webanwendung für seinen Betrieb. Da seine Mitarbeiter aktuell noch mit einer Anwendung arbeiten, die ein ähnliches Tastaturverhalten bietet, kam irgend wann mal die Frage auf:

Geht das bei Websiten auch?

Nach einem kleinen Test heiß die Antwort glücklicher weise "Ja". Sorgenkind ist hier allerdings mal wieder der Internet Explorer, bei dem man leider die Pfeiltasten nicht abfragen kann. Allerdings sollte auch für IE-Nutzer die Hervorhebung der aktuellen Tabellenzeile und die Nutzung der Maus etwas bringen.

Wenn man etwas über dieses Tastaturverhalten nachdenkt, findet man auch ein paar Situationen, bei denen man dieses Plugin sinnvoll einsetzen könnte. Ein Beispiel währen die Themenlisten in einem Forum oder die Übersicht der privaten Nachrichten.

Naja, bin auf jeden Fall froh, dass ich das Plugin jetzt in einem Zustand gebracht hab, in dem es dem ein oder anderen Programmierer helfen kann. War so frei und hab es zur Plugin-Liste der jQuery-Seite hinzugefügt. Vielleicht findet es jemand nützlich. :)

One comment for this post

leave a new one

#1 by
Madhavi

Hi This is Madhavi from India. I was really impressed for your implementation on "Navigate through table rows using the keyboard" I was trying to implement this on my simple table built with html code. The basic is working fine. But I am not able to apply this navigation selection for selected rows i.e., I want the navigation for only some rows and not for all the rows. The below is the link where you can check my stuff. http://jsfiddle.net/VNdT7/6/ Within my table i gave a class name as "test_select" for some of the rows.. and i want only those rows to be selected… I kindly request you to suggest a solution to achieve my requirement…

Leave a new comment

Having thoughts on your mind about this stuff here? Want to tell me and the rest of the world your opinion? Write and post it right here. Be sure to check out the format help (focus the large text field) and give the preview button a try.

optional

Format help

Please us the following stuff to spice up your comment.

An empty line starts a new paragraph. ---- print "---- lines start/end code" ---- * List items start with a * or -

Just to keep your skill sharp and my comments clean.

or