interactive table - please help

[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

[Peter Michaux]

Hi Dave,

On Feb 3, 9:22 am, Dave Ekhaus <[e-mail]:

i'm new to javascript.

<URL: http://jibbering.com/faq/>
<URL: http://jibbering.com/faq/#FAQ3_1watch for errata!
<URL: http://groups.google.com/group/comp....avascript/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.

<URL: http://www.dustindiaz.com/basement/tetris.html>

- 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

[Sean Inglis]

On Sat, 03 Feb 2007 09:22:30 -0800, Dave Ekhaus wrote:

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

Dave,

Your first, and most critically important step, should be to separate and
abstract the data you're representing with the table from the table
itself. In more general terms, ensure that you partition your code so that
you have a data structure (a 2D array of objects for example), usually
referred to as the "model", from the visual representation of that data
(an HTML table), usually referred to as the "view".

One of the biggest and most expensive traps you can fall into is to
combine the model and view within the html table itself. This has the
unfortunate side-effect of forcing you to use fragile methods like parsing
and updating the table HTML dynamically - nothing like this approach for
generating poor code.

Instead:

1) Create a 2D abstract structure of some kind to model the data your
table will display.

2) Dynamically generate the table itself from this data structure.
Consider adding an ID or somesuch to each cell that allows you to refer
back to the relate entry in your structure when an event is generated.

3) When you respond to events, use this ID to determine which point in the
data model is related, and base your actions on this. This may involve,
for instance, checking that your vertical index doesn't fall outside the
bounds of your data structure, rather inspecting the DOM to see if you've
fallen off the end of the table.

If you follow this pattern, you'll end up with a more robust, logical and
flexible solution.

Sean