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