interactive table - please help

Discussion in 'Javascript' started by Dave Ekhaus, Feb 3, 2007.

  1. Dave Ekhaus

    Dave Ekhaus Guest

    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 Ekhaus, Feb 3, 2007
    #1
    1. Advertising

  2. Hi Dave,

    On Feb 3, 9:22 am, Dave Ekhaus <> wrote:

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

    <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
     
    Peter Michaux, Feb 3, 2007
    #2
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. WJ
    Replies:
    2
    Views:
    543
  2. Replies:
    4
    Views:
    567
    Chris Uppal
    May 5, 2005
  3. KK
    Replies:
    2
    Views:
    721
    Big Brian
    Oct 14, 2003
  4. Farraige
    Replies:
    4
    Views:
    295
    Farraige
    Nov 8, 2006
  5. Replies:
    6
    Views:
    233
Loading...

Share This Page