interactive table - please help

D

Dave Ekhaus

hi

i'm new to javascript. i'm hoping to get some help and find out if
what i want to do is possible and - assuming it is, get some tips on
how to accomplish the task.

ok - assume i have a table, the contents of which are dynamic. there
can be any number of rows in this table - somewhere between 50 and 500
would be the range. in each row - there can be any number of td's.
the relative 'width' of a td in a tr is specified by a td's colspan.
the sum of all colspans for the td's in every tr is the same -> the
table is 'well formatted'. here's a rough ascii representation of
this table ...

Note: entries in this table are identified by "tr-i|td-j", so the 3rd
'td' in the 2nd 'tr' would be "tr-2|td-3". the '@' character separates
individual td's.

@-----------------------------------------------------------@
@ tr-1|td-1 @ tr-1|td-2 @
@-----------------------------------------------------------@
@ tr-2|td-1 @ tr-2|td-2 @ tr-2|td-3 @
@-----------------------------------------------------------@
@ tr-3|td-1 @
@-----------------------------------------------------------@
@ tr-4|td-1 @ tr-4|td-2 @ tr-4|td-3 @ tr-4|td-4 @
@-----------------------------------------------------------@

that's how a sample table looks

[note: in my editor the above table is well formatted as well as in a
test post message read via groups.google.com. however in my news
reader it is not 'well-formatted. i apologize if the posting arives
with screwed-up formatting]

this is how 'it' functions

- the table maintains 'focus' with respect to the td's or 'cells'
within a given tr or 'row'. 'focus' being defined as some visual
indication that the cell in question is different than cell's that do
not have the 'focus'. its really as simple as the focused cell having
a different background color than the others. when the focus moves to
another cell - that's cell's color changes. only one cell can have the
'focus' at a time.

- when the table is first displayed, some arbitrary cell has the
'focus'. for simplicity sake - say the first cell in the first row.

- the user can 'navigate' the table - aka change the cell that has the
focus, by using the keyboard or the mouse. the keyboard changes the
focus via the up, down, left, and right keys.

- keyboard navigation with the left/right keys is straight forward.
if the use presses the right arrow key, the focus moves to the cell to
the right of the focused cell. if the current focused cell is the last
cell in a row, then the focus does not change - but the javascript code
is aware that an 'edge' has been 'hit'. the left arrow key functions
similarly - just in the opposite direction

- keyboard navigation with the up/down keys is not as straight forward
as left/right. up/down focus transitions are dictated by first
identifying the left 'edge' of the cell with the current focus and then
finding the cell in the next row - be it above or below depending on
which key was hit, that overlaps with the left 'edge' of the previously
focused cell. describing several transitions should make the logic
clear. say the focus is currently on the first cell in the first row.
in the table above that would be tr-1|td-1

- user hits the right arrow key -> focus is now tr-1|td-2
- user hits the down arrow key -> focus is now tr-2|td-2
- user hits the down arrow key -> focus is now tr-3|td-1
- user hits the down arrow key -> focus is now tr-4|td-2
- user hits the right arrow key -> focus is now tr-4|td-3
- user hits the right arrow key -> focus is now tr-4|td-4
- user hits the up arrow key -> focus is now tr-3|td-1
- user hits the up arrow key -> focus is now tr-2|td-3

- if the user - while navigating vertically, reaches either the top or
bottom of the table, the javascript is aware of this event

- the user can use the mouse to change the 'focus' to any visible cell.

- the javascript code traps the return/enter key and performs some
arbitrary action when this happens. for example - causes the cell with
the current focus to blink.

- ideally - it would also be great if the right button mouse click
could be 'trapped', and when that happens the javascript would know on
top of which cell this key-press occurred. this key-press does not
have to occur over the currently 'focused' cell

if you made it this far - thanks for sticking with me. any
tips/pointers/relevant advice is extremely appreciated. if anyone
knows of any existing sample code that demonstrates any portion of the
aforementioned functionality i would be eternally grateful if you sent
me links.

thanks
dave
 
P

Peter Michaux

Hi Dave,

i'm new to javascript.

<URL: http://jibbering.com/faq/>
<URL: http://jibbering.com/faq/#FAQ3_1> watch for errata!
<URL: http://groups.google.com/group/comp.lang.javascript/msg/
04a7a303c2e67280>
i'm hoping to get some help and find out if
what i want to do is possible and - assuming it is, get some tips on
how to accomplish the task.

Start with the simplest example and slowly build up.

[snip about having a table where a cell has focus and the focus can be
changed by arrows and mouse clicks]

I haven't tried this with arrows keys but is sounds fine in prinicple.
I know that arrow keys can be observed at least in the popular
browsers now.

- ideally - it would also be great if the right button mouse click
could be 'trapped', and when that happens the javascript would know on
top of which cell this key-press occurred. this key-press does not
have to occur over the currently 'focused' cell

I think hijacking right clicks is asking for trouble. More importantly
the user probably wants the right click menu to work the same in all
pages. Right click should be under the user/browser control.

<URL: http://jibbering.com/faq/#FAQ4_27>

Peter
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,480
Members
44,900
Latest member
Nell636132

Latest Threads

Top