php - Javascript for creating excel like cursor movement -

php - Javascript for creating excel like cursor movement -

i have below form user input , update mysql table. there 25 rows in table given below , each row has 7 input boxes. need simple javascript function move around input boxes using arrow keys horixontally , vertically. @ nowadays tab can used , tab moves serially left right , cumbersome. found editable grids complex , know how handle info , need moviing around. in advance

noelelocationdose rate (mgy/h) tritium (dac) part (dac) iodine (dac) surface cont. (bq/cm2)

<?php $db=mysql_select_db($database,$con) or die("could not connect"); $secsql= "select * location order loc_id"; $result_sec=@mysql_query($secsql) or die(mysql_error()); $rc=0; while($row2=mysql_fetch_array($result_sec)) { echo "<tr>"; echo "<td>".++$rc."</td>"; echo "<td><input size='5' id='".$row2['elevation']."' value='".$row2['elevation']."' /></td>"; echo "<td><input id='".$row2['loc_id']."' value='".$row2['location']."' /></td>"; echo "<td><input size='5' id='dose' /></td>"; echo "<td><input size='5' id='h3' /></td>"; echo "<td><input size='5' id='part' /></td>"; echo "<td><input size='5'id='iod' /></td>"; echo "<td><input size='5'id='cont' /></td>"; echo "</tr>"; } ?> </table> <div align="center"> <input type="submit" id="submit" name="submit" value="submit" width="30" /> </div> </form>

you have right start, giving each editable input field unique id. however, have error, in while loop processes multiple rows, lastly 5 ids (e.g., id='dose') duplicated, , need different. suggest alter id= name= , give them similar-but-but-still-unique ids, such id='aa' , id='ab' , id='ba' , on. then, in javascript, can fetch whole two-dimensional array of input objects using this:

var cels, x, y; //globals cels=[]; for(x=0; x<7; x++) { tmp="abcedfg".substr(x,1); cels[x]=[]; for(y=0; y<25; y++) cels[x][y]=document.getelementbyid(tmp+"abcdefghijklmnopqrstuvwxy".substr(y,1)); }

that code needs executed when page loaded web server, along whatever-other page-initialization stuff do. getting php, need give each of input fields onkeydown function phone call (the same call!), say,

echo "<td><input size='5' name='dose' id='ac' onkeydown='tstkey(event, id);' /></td>";

that function this:

function tstkey(e, i) { x="abcdefg".indexof(i.substr(0,1)); y="abcdefghijklmnopqrstvwxy".indexof(i.substr(1,1)); if(e.keycode == 13) //enter key pressed? { x++; //index of next cell in current row if(x>6) //off end? { x=0; //first cell y++; //next row if(y>24) //off end? y=0; //first row } } // if(e.keycode == down-arrow, up-arrow, etc ) // appropriate manipulation of x , y coordinates cels[x][y].focus(); //move cursor other cell in 2d array of input fields return; }

note code need submit button send info web server. also, since more of suggestion finish detailed answer, haven't tested code typos , such. experimentation browser's built-in javascript debugger reveal keycodes uparrow, downarrow, etc.

javascript php jquery