How can I make the up and down arrow keys move around the rows of a table and programmatically apply sudo: hover to these rows?

Question

I have input of type text that is used to perform asynchronous searches for table rows using jquery. I have a .on function attached to the search input and by pressing a key, I call the hoverDown () function. What I would like to do when the down arrow key is pressed is to point to the rows of the table. And when the row of the table hangs over the arrow key and the user falls into it, I would like href to work and force the user to link to this linked page. I can detect e.keyCode, but about this, how much I managed to get, and I really don't know where to get it. Relevant Code:

// HTML

<div id="main">
<input type="text" class="table-search" id="search" autocomplete="off"   placeholder="Search Clients…">
<table class="table" id="tblData">
<thead><tr><th>Name</th> <th>Title</th></tr></thead>
<tbody>
<tr><td><a href="http://lar.loc/cases">Scott</a></td> <td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Billy</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">George</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Sara</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">John</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Megan</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Ben</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jully</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Bethany</a></td><td>Client</td></tr><tr><td><a href="http://lar.loc/cases">Alen</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jane</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alice</a></td><td>Client</td></tr></tbody></table>
</div>

// javascript

$(document).ready(function(){
    $("#main").on("keydown", "#search", function(e){
    hoverDown();
    });
});


function hoverDown()
{
    if ($(document).keydown()) {
        $(document).keydown(function(e){

            if (e.keyCode == 40) { 
                alert("down");
                e.keyCode = null;
            }
            if (e.keyCode == 38) { 
                alert("up");
                e.keyCode = null;
            }

        });
    };
}

Answer 1

, http://jsfiddle.net/7BcZA/2/

:

"" , . selected. , , CSS. selected tr, .

, .

" ", =).