Stuff At Work

Last week I had to face following scenario.

I had to create an scrollable HTML table and when it loads, the first entry is already selected. I should be able to navigate it by arrow keys.

When I create it the arrow keys worked properly, but the scrollbar does not work at that time. So I can select only rows in the visible area of table.

If I click on a row, then both keys and scrollbar work properly.(When I press down arrowkey consecutively, scrollbar works and shows the selected row).

I wanted to find a way , which can activate both arrowkeys and scrollbar when the page loads.This is the solution I found.

you can add a scrollbar to the table by following command.


To make scrollbar and keys work, you need to set focus to the table when the page loads.As the table cannot be focused correctly, put a tag and set focus to it.

window.onload = function(){
document.getElementById('doctypelink').focus();
}