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 0 | Column 1 | column 2 | ReadOnly | Column 4 |
---|---|---|---|---|
2asasa | 3asasa | 4asasa | 4asasa | |
2asasa | Yes | 4asasa | ||
row1 row2 | 2asasa | 3asasa3asasa3asasa3asasa | 4asasa | 4asasa |
2asasa | 3asasa | 4asasa | ||
2asasa | 3asasa | 4asasa | 4asasa |
The logic ; please have a look at the source code of this page
The table has an event handlercellEdit(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 0 | Column 1 | column 2 | Column 4 |
aaaaaaaaaa sdsdds sddds | 2asasa | 3asasa | 4asasa |
2asasa | Yes | ||
row1 row2 | 2asasa | NIX | 4asasa |
2asasa | 3asasa | ||
2asasa | 4asasa | 4asasa | |
2asasa | 3asasa | 4asasa | |
2asasa | Yes | ||
row1 row2 | 2asasa | NIX | 4asasa |
2asasa | 3asasa | ||
2asasa | 4asasa | 4asasa |
All in a DIV | |||
---|---|---|---|
Column 0 | Column 1 | column 2 | Column 4 |
2asasa | 3asasa | 4asasa | |
2asasa | Yes | ||
row1 row2 | 2asasa | NIX | 4asasa |
2asasa | 3axsssssssssssssssssssssssssssssasa | ||
2asasa | 4asasa | 4asasa | |
2asasa | 3asasa | 4asasa | |
2asasa | Yes | ||
2asasa | Yes | ||
row1 row2 | 2asasa | NIX | 4asasa |
2asasa | 3axsssssssssssssssssssssssssssssasa | ||
2asasa | 4asasa | 4asasa | |
2asasa | 3asasa | 4asasa | |
2asasa | Yes | ||
row1 row2 | 2asasa | NIX | 4asasa |
2asasa | 3asasa | ||
2asasa | 4asasa | 4asasa |