Forum:

HTML Pages with CSS and JavaScript

Using Up/Down Arrow Key to Move in a table

Ranch Hand

Posts: 1309

posted 10 years ago

I am facing a challenge.

I put a data table inside the <div ....> tag. And I have created a scrollbar for the <div ...> tag.

The height of the <div ...> is set to display a certain number of rows of the data table for viewing. Let's say that I can see 10 rows within the <div ....>.

The challenge is that I must also use the up/down arrow keys on the keyboard to view all the rows in that table. The requirements are:

1. The first row of the table must be highlighted when the web page is brought up to the screen.

2. Pressing the down arrow key once moves the highlighter to the second row of the table; so on so forth.

3. When the highlighter is on the 10th row of the table, pressing the down arrow key will bring the 11th to 20th rows of the table for viewing and the highlighter will be on the 11th row of the table.

4. It keeps going util the last set of rows (maybe less than 10) are brought up to the screen.

5. The up arrow key works in a similar way.

I have surfed on the internet and found

http://www.tipstrs.com/tip/799/Scrolling-HTML-elements-using-the-keyboard
http://www.codeproject.com/jscript/WithHorizontalScrollbar.asp

but they are not exactly what I am looking for.

Does a re-usable code exist?
[ July 02, 2007: Message edited by: Bear Bibeault ]

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 10 years ago

I looked at the first link you posted. I am thinking that is almost exactly what you want. The only bits you need to modify are, instead of scrolling the DIV on every down/up, highlight the appropriate row in your table and at the same time checking which row you are on. If you know on the 11th row you need to scroll that to the top, then use the methods available to scroll that row to the top.

What have you tried?

JiaPei Jen

Ranch Hand

Posts: 1309

posted 10 years ago

I have been struggling to use keyboard keys to scroll rows of a table up or down one at a time (I have a vertical scrollbar at right hand side of a table.)

I first highlight the first row of the table when the page is loaded. It is working now.

Then, I tried to work out some JavaScript code to move the highlighter up or down by pressing the keyboard up arrow key or down arrow key. The code is not working. Would someone kindly take a look at the code:

Gregg Bolinger

Ranch Hand

Posts: 15304

I like...

posted 10 years ago

Did you look at the example code Eric provided for you here? I believe it does what you want, except for the scrolling part.

JiaPei Jen

Ranch Hand

Posts: 1309

posted 10 years ago

But, it is the "scrolling" part I am really after. Scrolling is the user requirement on which I am working.

JiaPei Jen

Ranch Hand

Posts: 1309

posted 10 years ago

Hi, I have made something work - I am able to use the keyboard down arrow key to highlight the next row in the table or use the keyboard up arrow key to highlight the previous row in the table. And When the page is loaded, the first row of the table is automatically highlighted (see the code shown below.)

But, there are two problems:

1. Before I use the keyboard keys to scroll rows one at a time, I have to de-highlight the first row and re-highlight the first row of the table using the mouse. Does it mean that my table is not "on focus" when the page is loaded? How do I set the focus to the table?

2. I can use the down/up arrow keys to scroll rows one at a time. However, I have 10 rows on display within the <div> when the page is loaded (and the table has a couple hundreds of rows.) I want to keep those 10 rows on the screen when I am moving downwardly until I reached the 10th row. That is to sasy, when the highlighter is on the 10th row and I press the down arrow key, then the first row retires from view and the 11th row comes into view. I am still unable to figure it out how to do it.

If someone could kindly help.

.....
.....
    <script language="JavaScript1.1" type="text/javascript">
var currentRow = 1;
var VISIBLE_ROWS = 10;

function highlightRow(tr) {
    tr.bgColor = (tr.bgColor != '#0000ff') ? '#0000ff' : '#ffffff';
    highlightedRow = tr;
}

function dehighlightRow(tr) {
    tr.bgColor = (tr.bgColor != '#ffffff') ? '#ffffff' : '#0000ff';
table = null;
trs = null;
}
 
function processKeys( e ) 
{ 
var table = document.getElementById( 'countriesList:countryTable' );
var numRows = table.rows.length;
var keyID = (window.event) ? event.keyCode : e.keyCode;

switch (keyID)
{
// Key up.
case 38:
if (parseInt(currentRow) == parseInt(1)) 
{
// reached the top of the table; do nothing.
return true;
} else 
{
// move one row up.
scrollRow( "up" );
setCurrentRow( currentRow );
return false;
}
break;

// Key down.
case 40:
if (currentRow == (numRows - 1)) 
{
// reached the end of the table; do nothing
return true;
} else 
{ 
scrollRow( "down" );
        setCurrentRow( currentRow );
if (currentRow > VISIBLE_ROWS) 
{
return true;
} else 
{
return false;
}
}
break;
}

JiaPei Jen

Ranch Hand

Posts: 1309

posted 10 years ago

I have tried to set the focus when the page is loaded:

Then my first row is no longer highlighted when the page is loaded. And other JavaScript functions stops working.

I tried to put:

instead. However, I do not know where to put my anchor; i.e. <a ...></a>

JiaPei Jen

Ranch Hand

Posts: 1309

posted 10 years ago

I have solved my first problem - set focus on the table when the web page is loaded. The solution is:

in addition to specify the attribute:

for the <table ....> tag, I have to put

in my JavaScript.

I am still struggling with my second problem. I am able to use the keyboard down arrow key and up arrow key to move down and up rows in the table one at a time with the current row highlighted.

But, I am still short of what I want to achieve - I set the height of my DIV to have 10 rows for viewing. And my table has about 200 rows. I want to keep the first 10 rows in the viewing area until I press the down arrow key the 11th time. At that juncture, the 11th to 20th row should be moved to the viewing area. So on and so forth. My code is shown below. I need ideas to modify my code. Thank you.

....
        <script language="JavaScript1.1">
 
var firstRow = 1;
var currentRow;
var highlightedRow;
 
function addOn clickToDatatableRows() {
    var trs = document.getElementById('countriesList').getElementsByTagName('tr');
    for (var i = 0; i < trs.length; i++) {
        trs[i].on click = new Function( "highlightRow( this )" );          
    }
}
 
function highlightRow( tr ) {
if ( currentRow == null )
{
    tr.bgColor = (tr.bgColor != '#0000ff') ? '#0000ff' : '#ffffff';
    highlightedRow = tr;
} 
else
{
    dehighlightRow( highlightedRow );
    tr.bgColor = (tr.bgColor != '#0000ff') ? '#0000ff' : '#ffffff';
    highlightedRow = tr;
    currentRow = tr.rowIndex;
}
}

function dehighlightRow( tr ) {
    tr.bgColor = (tr.bgColor != '#ffffff') ? '#ffffff' : '#0000ff';
}
 
function processKeys( e ) 
{ 
var table = document.getElementById( 'countriesList:countryTable' );
var trs = document.getElementById('countriesList').getElementsByTagName('tr');
var numRows = table.rows.length;
var keyID = (window.event) ? event.keyCode : e.keyCode;

// Key down.
case 40:
if ( currentRow == (numRows - 1) )
{
// reached the end of the table; do nothing
return true;
} else 
{ 
scrollRow( "down" );
setCurrentRow( currentRow );
if (currentRow > VISIBLE_ROWS) 
{
return true;
} else 
{
return false;
}
}
break;
}

</table>
 
.....
.....
                                                                                          <script>
addOn clickToDatatableRows();
var table = document.getElementById( 'countriesList:countryTable' );
var trs = table.getElementsByTagName( 'tr' );
highlightRow( trs[ firstRow ] );
trs[ firstRow ].focus();
currentRow = trs[ firstRow ].rowIndex;
document.on key down = function(event) { processKeys(event); }; 
                                                                                          </script>
    </form>
</body>
        </script>

It is sorta covered in the JavaRanch Style Guide.

Using Up/Down Arrow Key to Move in a table

Similar Threads