Moving an input field over table cells

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

Column 0Column 1column 2ReadOnlyColumn 4
2asasa3asasa4asasa4asasa
2asasaYes4asasa
row1
row2
2asasa3asasa3asasa3asasa3asasa4asasa4asasa
2asasa3asasa4asasa
2asasa3asasa4asasa4asasa

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

The table has an event handler cellEdit(e) attached to capture the onclick 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 will have a callback for the onkeydown event , jump.updown ; Inside jump.updown the keycode for the TAB, Shift-TAB and RETURN key will be handled. If TAB or RETURn is detected a mouse click for the next cell is fired, for SHIFT-TAB a mouse click for the previus cell is fired.

All in
Column 0Column 1column 2Column 4
aaaaaaaaaa sdsdds sddds2asasa3asasa4asasa
2asasaYes
row1
row2
2asasaNIX4asasa
2asasa3asasa
2asasa4asasa4asasa
2asasa3asasa4asasa
2asasaYes
row1
row2
2asasaNIX4asasa
2asasa3asasa
2asasa4asasa4asasa
Here a table in a div with overflow
All in a DIV
Column 0Column 1column 2Column 4
2asasa3asasa4asasa
2asasaYes
row1
row2
2asasaNIX4asasa
2asasa3axsssssssssssssssssssssssssssssasa
2asasa4asasa4asasa
2asasa3asasa4asasa
2asasaYes
2asasaYes
row1
row2
2asasaNIX4asasa
2asasa3axsssssssssssssssssssssssssssssasa
2asasa4asasa4asasa
2asasa3asasa4asasa
2asasaYes
row1
row2
2asasaNIX4asasa
2asasa3asasa
2asasa4asasa4asasa