{"id":149,"date":"2017-03-01T22:53:08","date_gmt":"2017-03-01T20:53:08","guid":{"rendered":"http:\/\/geekinto.com\/?p=149"},"modified":"2017-03-03T00:40:08","modified_gmt":"2017-03-02T22:40:08","slug":"oracle-apex-how-to-move-between-rowscolumns-by-updown-rightleft-keys-on-tabular-form","status":"publish","type":"post","link":"https:\/\/howoracleapex.com\/?p=149","title":{"rendered":"Oracle APEX | How to move between Rows\/Columns By [up\/down\/right\/left\/enter\/delete] keys on tabular form ?"},"content":{"rendered":"

Its Easy,<\/p>\n

Now i updated code to using keyboard keys:
\nUp \/ Down
\nLeft \/ Right
\nEnter
\nDelete<\/p>\n

Just copy next code and follow a PICs<\/p>\n

\/\/ key events\r\nfunction keyevent(pThis, e) {\r\n    \/\/onkeyup=\"keyevent(this, event);\"\r\n\r\n    var charCode;\r\n    var id_this = pThis.id;\r\n    var id_subs = pThis.id.substr(4);\r\n    \/\/Get key code (support for all browsers)\r\n    if (e && e.which) {\r\n        charCode = e.which;\r\n    } else if (window.event) {\r\n        e = window.event;\r\n        charCode = e.keyCode;\r\n    }\r\n\r\n    var keynum;\r\n    var current = document.getElementsByName(pThis.name);\r\n    if (window.event) \/\/ IE\r\n    {\r\n        keynum = e.keyCode;\r\n    } else if (e.which) \/\/ Netscape\/Firefox\/Opera\r\n    {\r\n        keynum = e.which;\r\n    }\r\n\r\n    \/\/ Up\/Down Keys to move between rows.\r\n    if (keynum == 40 || keynum == 38) \/\/ Key-Up or Key-Down\r\n    {\r\n        for (i = 0; i < current.length; i++) {\r\n            if (current[i].id == pThis.id) \/\/ This is current row\r\n            {\r\n                if (keynum == 40) \/\/ Move down\r\n                {\r\n                    current[Math.min(current.length - 1, i + 1)].focus();\r\n                } else \/\/ Move up\r\n                {\r\n                    current[Math.max(0, i - 1)].focus();\r\n                }\r\n            }\r\n        }\r\n    }\r\n\r\n\r\n\r\n    \/\/ Right\/Left keys to move between columns. \r\n    \/\/(DEPEND ON THEME DIRECTION \"LTR\" OR \"RTL\")\r\n\tvar checkDir = $('html, body').attr('dir');\r\n    if (charCode == 39) {\r\n\r\n    \t\/\/Checking Direction Theme\r\n    \tif (checkDir==\"rtl\"){\r\n    \t\t$('#' + id_this).closest('td').prev().find('input').focus();\r\n    \t} else{\r\n    \t\t$('#' + id_this).closest('td').next().find('input').focus();\r\n    \t}\r\n\r\n    }else if (charCode == 37) {\r\n\r\n    \t\/\/Checking Direction Theme\r\n    \tif (checkDir==\"rtl\"){\r\n    \t\t$('#' + id_this).closest('td').next().find('input').focus();\r\n    \t} else {\r\n    \t\t$('#' + id_this).closest('td').prev().find('input').focus();\t\t\r\n    \t}\r\n    }\r\n\r\n\r\n\r\n\r\n    \/\/ Delete Key.\r\n    if (charCode == 46) {\r\n        var row_id = pThis.id.substr(4);\r\n        if ($('#f01_' + row_id).val() == 0) {\r\n            $('#f01_' + row_id).closest(\"tr\").remove();\r\n        }\r\n        \/\/focus at last row\r\n        var nm = pThis.name;\r\n        \/\/$('[name=f03]:last').focus();\r\n        $('[name=' + nm + ']:last').focus();\r\n    }\r\n\r\n    \/\/ Enter Key.\r\n    if (charCode == 13) {\r\n        apex.widget.tabular.addRow();\r\n\r\n        \/\/focus at last row\r\n        var nm = pThis.name;\r\n        $('[name=' + nm + ']:last').focus();\r\n    }\r\n\r\n}\r\n<\/pre>\n
\"Screenshot<\/a> \"Screenshot<\/a><\/p>\n
 <\/p>\n
onkeyup=\"keyevent(this, event);\"<\/pre>\n
 <\/p>\n
 <\/p>\n
Now Save & Check \ud83d\ude42<\/p>\n
 <\/p>\n
 <\/p>\n
Regards,<\/p>\n
Amr Abdeen<\/p>\n","protected":false},"excerpt":{"rendered":"
Its Easy, Now i updated code to using keyboard keys: Up \/ Down Left \/ Right Enter Delete Just copy next code and follow a PICs \/\/ key events function keyevent(pThis, e) { \/\/onkeyup=”keyevent(this,...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,13,12,2],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","hentry","category-apex","category-jquary","category-jscript","category-oracle"],"_links":{"self":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=149"}],"version-history":[{"count":2,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/149\/revisions"}],"predecessor-version":[{"id":151,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=\/wp\/v2\/posts\/149\/revisions\/151"}],"wp:attachment":[{"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/howoracleapex.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}