Take the following cut down JS Object (JS Fiddle: http://jsfiddle.net/52a4wq0x/1/) - emulating a multidimensional associative array I suppose.
var ControlMap = {
tb_RosMon: { row: 1, col: 1 },
tb_RosTue: { row: 1, col: 2 },
tb_RosWed: { row: 1, col: 3 },
tb_RosThu: { row: 1, col: 4 },
tb_RosFri: { row: 1, col: 5 },
tb_RosSat: { row: 1, col: 6 },
tb_RosSun: { row: 1, col: 7 },
tb_AbsMon: { row: 2, col: 1 },
tb_AbsTue: { row: 2, col: 2 },
tb_AbsWed: { row: 2, col: 3 },
tb_AbsThu: { row: 2, col: 4 },
tb_AbsFri: { row: 2, col: 5 },
tb_AbsSat: { row: 2, col: 6 },
tb_AbsSun: { row: 2, col: 7 },
ddl_ReasonMon: { row: 3, col: 1 },
ddl_ReasonTue: { row: 3, col: 2 },
ddl_ReasonWed: { row: 3, col: 3 },
ddl_ReasonThu: { row: 3, col: 4 },
ddl_ReasonFri: { row: 3, col: 5 },
ddl_ReasonSat: { row: 3, col: 6 },
ddl_ReasonSun: { row: 3, col: 7 },
tb_AddMon: { row: 4, col: 1 },
tb_AddTue: { row: 4, col: 2 },
tb_AddWed: { row: 4, col: 3 },
tb_AddThu: { row: 4, col: 4 },
tb_AddFri: { row: 4, col: 5 },
tb_AddSat: { row: 4, col: 6 },
tb_AddSun: { row: 4, col: 7 },
Mon_AddReason: { row: 5, col: 1 },
Tue_AddReason: { row: 5, col: 2 },
Wed_AddReason: { row: 5, col: 3 },
Thu_AddReason: { row: 5, col: 4 },
Fri_AddReason: { row: 5, col: 5 },
Sat_AddReason: { row: 5, col: 6 },
Sun_AddReason: { row: 5, col: 7 }
}
This is basically a map of input id's (tb_RosMon
, tb_AbsMon
etc) and their row & column within an HTML <table>.
I'm trying to add key navigation to the inputs in question (up, down, left & right).
i.e. if a user presses the down arrow whilst on tb_AbsTue
, I fetch tb_AbsTue
's position as follows:
var row = ControlMap[SourceID]["row"]; //Returns 2
var col = ControlMap[SourceID]["col"]; //Returns 2
I'll then increment row by 1 (as they pressed down) to give me a destination of row 3 col 2. I then need to search the above object to see if an input (tb_###) exists at row 3 col 2 & return its ID.
How could one do that? Plain JS or JQuery would be fine.