Navigate HTML form using up/down arrows

Question

I have a form with input elements representing key-value pairs.
These input elements are generated dynamically within the page when the user desires to do so.

The form looks somewhat like this:


Here's some example code for a row, consisting of two input elements:

<tr id='1523459952424.153'>
 <td class='w50'>
  <input type='text' name='kp_src[]' placeholder='Key'/>
 </td>
 <td class='w50'>
  <input type='text' name='kp_dest[]' placeholder='Value'/>
 </td>
 <td>
  <!--
   I excluded this part of the code for the sake of cleanliness,
   this would be where the remove button lives its happy life.
  -->
 </td>
</tr>

How do I enable navigating the form with the ↑ and ↓ buttons, without using any external libraries ?

Ex.: go from the blue input to the green input with the ↓ button, and from the green input to the blue input with the ↑ button.

Pseudocode is basically all I need.


Thanks.

Answer 1

tymeJV's comments made me think about how easy it actually is, in my case I'd use the following pseudocode in the keyup event of the input elements:

define a var named foo
if key is down arrow
  set foo to the next sibling of the current row
else if key is up arrow
  set foo to the previous sibling of the current row
otherwise
  abort

define a var named bar
if current input is the first input in the current row
  set bar to the first input in foo
else if current input is second input in the current row
  set bar to the second input in foo
otherwise
  abort

set focus to bar

I might've posted the question too soon, but I hope it'll be useful to someone else in the future.

Thanks.

---

Edit: I haven't had the time to test (or even write, lol) it yet, until today. I'll post my final code below, just in case someone finds it useful.

Javascript:

 // obj - the source element // event - the event data // i - child index of the textbox function form_vert_nav(obj, event, i) { var o = ((event.keyCode == 38 || event.keyCode == 40) ? obj.parentNode.parentNode : null); if (event.keyCode == 38) { // up o = o.previousSibling; } else if (event.keyCode == 40) { // down o = o.nextSibling; } else { return; } if (o == null) { // keyCode wasn't 38 or 40 and magically slipped through the else, // or the sibling simply doesn't exist (more likely). return; } if ((o = o.getElementsByTagName(obj.tagName)[i]) == null) { // 404 Element Not Found return; } o.focus(); } 

HTML:

 <tbody> <tr> <td><input type='text' onkeydown='form_vert_nav(this, event, 0);'/></td> <td><input type='text' onkeydown='form_vert_nav(this, event, 1);'/></td> </tr> <tr> <td><input type='text' onkeydown='form_vert_nav(this, event, 0);'/></td> <td><input type='text' onkeydown='form_vert_nav(this, event, 1);'/></td> </tr> <tr> <td><input type='text' onkeydown='form_vert_nav(this, event, 0);'/></td> <td><input type='text' onkeydown='form_vert_nav(this, event, 1);'/></td> </tr> </tbody>