PHP & JavaScript & HTML & CSS

Moving an input field over table cells

Just click into a table cell, then use TAB or SHIFT-TAB to move the input field.

Column 0Column 1column 2Column 3

The logic ; please have a look at the source code of this page

The table above is placed inside a form. Before the table, an input field ,backTab, is placed that will receive the focus when SHIFT-TAB is pressed, At the end of the Table an input field ,forwTab, is placed that will receive the focus when TAB is pressed. Both fields have an eventhandler ,clickJump(dir), attached for the onfocus event.

When we now click inside any table cell the inner HTML of that cell is replaced by an input field with the current cell content as a value. This is done inside the onclick call back cellEdit() for the table.

This input field is now in between the two other fields we placed around the table. When TAB is now pressed the field with id forwTab receives focus and the onfocus call back for this field is called. Inside this function, clickJump(dir), an onclick event is generated for the next cell. Same goes for the SHIFT-TAB.