I have a grid with two <tbody> pairs. (I need to be able to hide
either section of the table). I''m allowing the user to navigate
between cells of the grid using their keyboard.
When I key up (up arrow) or down (down arrow) within the same tbody,
the cursor moves around like a charm. But when I get to the first row
of the bottom tbody or the bottom row of the top tbody, the cursor
moves no further.
Here''s a snippet: (for up arrow - it''s similar to down arrow):
this.up(''tr'').previous(''tr'').down(''input[type="text"]'').activate();
if you have a grid like this:
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
</tr>
</thead>
<tbody id="topsection">
<tr>
<th>row 1</th>
<td><input type="text"></td>
</tr>
<tr>
<th>row 2</th>
<td><input type="text"></td>
</tr>
</tbody>
<tbody id="bottomsection">
<tr>
<th>row 3</th>
<td><input type="text"></td>
</tr>
<tr>
<th>row 4</th>
<td><input type="text"></td>
</tr>
</tbody>
</table>
If the cursor is in the text field for row 3, the up-arrow won''t move
the cursor to row 2.
Likewise if the cursor is in the text field for row 2, the down-arrow
won''t move the cursor to row 3.
Any ideas?
Thanks,
Jon
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
On May 22, 11:53 am, Jay Tee <jtre...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> I have a grid with two <tbody> pairs. (I need to be able to hide > either section of the table). I''m allowing the user to navigate > between cells of the grid using their keyboard. > > When I key up (up arrow) or down (down arrow) within the same tbody, > the cursor moves around like a charm. But when I get to the first row > of the bottom tbody or the bottom row of the top tbody, the cursor > moves no further. > > Here''s a snippet: (for up arrow - it''s similar to down arrow): > > this.up(''tr'').previous(''tr'').down(''input[type="text"]'').activate();Previous works on siblings, since the rows are in different tableSections, they aren''t siblings. Users can navigate using the tab key (zero script required), you can control the order using the tabindex attribute. If you must use script, you can use the rowIndex property (which is relative to all the rows in the table) of the row you are in as the basis for going to the upper or lower row. e.g. function upRow(tr) { var tableParent = tr.parentNode.parentNode; return tableParent.rows[ tr.rowIndex - 1 ]; } The above is just an example of the algorithm, you will need to check that there is a row above (i.e. rowIndex > 0), that it isn''t in the thead, etc. -- Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On May 21, 11:26 pm, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:> > Users can navigate using the tab key (zero script required), you can > control the order using the tabindex attribute. >The app is actually a conversion from a PC-based application to a web- based version. From a usability standpoint, the users have become accustomed to using certain key combinations when entering data. (I''m currently trapping the keypress event to deal with their inputs): 1. TAB key - move to next field 2. Shift+TAB - move to previous field 3. ENTER key - submit new value and move to the next row down 4. ARROW keys - move the cursor between fields (some of the grids are fully editable, so left and right become a factor) In each of the cases where I''m moving the cursor to a text input, I''m using the ''activate'' method to select the text - so they can just start typing their new values.> If you must use script, you can use the rowIndex property (which is > relative to all the rows in the table) of the row you are in as the > basis for going to the upper or lower row. > > e.g. > > function upRow(tr) > { > var tableParent = tr.parentNode.parentNode; > return tableParent.rows[ tr.rowIndex - 1 ]; > } >I wasn''t aware of the rowIndex property! Thanks for the tip :) I''ll try using that and see what happens. I''m assuming that the rowIndex is for the whole table and is not affected by any tbody and thead tags? Thanks, Jon --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
On May 23, 1:04 am, Jay Tee <jtre...-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:> On May 21, 11:26 pm, RobG <rg...-AFFH1GffN5hPR4JQBCEnsQ@public.gmane.org> wrote:[...]> > If you must use script, you can use the rowIndex property (which is > > relative to all the rows in the table) of the row you are in as the > > basis for going to the upper or lower row. > > > e.g. > > > function upRow(tr) > > { > > var tableParent = tr.parentNode.parentNode; > > return tableParent.rows[ tr.rowIndex - 1 ]; > > } > > I wasn''t aware of the rowIndex property! Thanks for the tip :) > I''ll try using that and see what happens. I''m assuming that the > rowIndex is for the whole table and is not affected by any tbody and > thead tags?It''s amazing what you find when you read the spec :-) rowIndex: <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-67347567 > sectionRowIndex: <URL; http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-79105901 > -- Rob --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" group. To post to this group, send email to rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---