Can't find the issue: javascript/jQuery

I have the following function that gets called on the KeyDown event of a link. Basically I'm trying to move down the table (the application calls it a ListBox). In the first loop what I'm trying to do is see if they use the mouse to click inside the table first and my hope was to find the row value and then manipulate the class (highlight) from there.

Unfortunately right now I'm not even getting that far. When the screen loads and I press the down button, the current row (0) has it's class changed as well as row (1). But on the next down button press the tr_lst says it is undefined. Which then throws the loop off and then I get all sorts of errors.

I tried to implement a jsfiddle, however, I couldn't get it working. But you can see some of the code I'm trying to implement.

function xKeyDown(event,ListBoxVal){


var tr_lst = $('#' + ListBoxVal).find('tr[class="开发者_Go百科LUGridRowHighlight"]');
var iCount = 0;

for (iCount = 0; iCount <= $('#' + ListBoxVal + ' tr').length; iCount++){
    if($('#' + ListBoxVal + ' tr:eq('+iCount+')').attr('id') == tr_lst.attr('id')){
        lstRow = iCount;
        break;
    }
}


if (event.keyCode == 40){
//arrow down
    if(parseInt(lstRow) < $('#' + ListBoxVal + ' tr').length)
    {
        if(parseInt(lstRow) == 0){
            document.getElementById(ListBoxVal).focus(); 
            lstRow +=1;

            document.getElementById($('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').attr('id')).focus();
            $('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');
            $('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight') .addClass('LUGridRow');
            
        }else{
            document.getElementById($('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').attr('id')).focus();
            $('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');
            $('#' + ListBoxVal + ' tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight') .addClass('LUGridRow');
            lstRow +=1;
        }
    }
...

Update:

After looking into this further... It appears that when I click the down arrow more than once the following code is causing an error:

var tr_lst = $('#' + ListBoxVal).find('tr[class="LUGridRowHighlight"]');

When I try to print this out it is 'undefined'

I'm wondering since I am manipulating the class via jQuery do I need to add a .live somewhere to the find? As I believe when elements are manipulated dynamically the .live comes into play. Any suggestions?

---

Try this

function xKeyDown(event,ListBoxVal){

var $listBoxVal = $('#' + ListBoxVal);
var trs = $listBoxVal.find('tr');
var tr_lst = $listBoxVal.find('tr.LUGridRowHighlight');
var tr_lst_id = tr_lst.attr('id');
var iCount = 0;

for (iCount = 0; iCount <= trs.length; iCount++){
    if($listBoxVal.find('tr:eq('+iCount+')').attr('id') == tr_lst_id){
        lstRow = iCount;
        break;
    }
}


if (event.keyCode == 40){
//arrow down
    if(parseInt(lstRow) < $listBoxVal.find('tr').length)
    {
        if(parseInt(lstRow) == 0){
            $listBoxVal.focus(); 
            lstRow +=1;

            $("#"+$listBoxVal.find('tr:eq('+parseInt(lstRow)+')').attr('id')).focus();

           $listBoxVal.find('tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');

            $listBoxVal.find(' tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight').addClass('LUGridRow');

        }else{
            $("#"+$listBoxVal.find('tr:eq('+parseInt(lstRow)+')').attr('id')).focus();
            $listBoxVal.find('tr:eq('+parseInt(lstRow)+')').addClass('LUGridRowHighlight');
            $listBoxVal.find('tr:eq('+parseInt(lstRow)+')').prev().removeClass('LUGridRowHighlight').addClass('LUGridRow');
            lstRow +=1;
        }
    }
...