Dynamic Table navigation in JavaScript using mouse and keyoboard

I am using dynamic table creation and I want to create table navigation using keyboard and mouse when the list is populated in the table. Below is the code that is printing the dynamic list in the table and now I want to navigate it.

function validateInputs(dealerresult) {
    alert("Hello");
    var params = $("#getDealerdetails").serialize();
    var url = '<fmt:message key="app.contextPath"/>/channels/getDealerListbyCriteria.htm?channel=1';
    $.post(url, param开发者_开发知识库s, function (data) {
        //alert("Hello");
        //alert(data);  
        var dealerData = data;
        var JSONObj = JSON.parse(dealerData).result;

        var table = document.getElementById(dealerresult);
        var rowCount = table.rows.length;


        alert(rowCount);

        //var row = table.insertRow(rowCount);
        //   var cell; = row.insertCell(0); 
        //   cell1.innerHTML="Dealer"
        //   var cell2 = row.insertCell(1);    
        //   cell2.innerHTML = 'Town'

        for (i = 0; i < JSONObj.length; i++) {
            var row = table.insertRow(rowCount);
            //row.style.className = 'navigateable';
            row.insertCell(0).innerHTML = JSONObj[i].bpName;
            row.insertCell(1).innerHTML = JSONObj[i].bpTown;
            rowCount++;

            //alert(JSONObj[i].bpName);
        }


    });
    document.getElementById('popupa').style.display = 'block';
}

---

You can find which key is pressed by identifying the keyCodes of the key pressed. Take a look at the following snippet of code which is being currently used by me to navigate through a jqgrid using up/down arrow keys.

        $(document).keypress(function(e){
            e.preventDefault(); // so that the default event for the key, which is to 
                                // scroll is disabled.
            if(e.keyCode == 40) { // down arrow key
                 // write code to get the row or highlight it using jquery and css                 
            }
            if(e.keyCode == 38) { // up arrow key
                 // write code to get the row or highlight it using jquery css                                   
            }
        });

Also if you intend to just highlight the row and show it always in the screen then you can write appropriate code to do that. Suppose the row is not visible then look into scrollIntoView() which can show an element on the screen. Hope this is what you are looking for. If you find a better answer please post it here so that I can change my approach. :)