Question

please consider this codes:

I have a table like this:

<table class="ArrowNav" cellspacing="0" rules="all" border="1" id="GridView1" style="height:302px;width:692px;border-collapse:collapse;">
    <tr>
        <th class="Id" scope="col">Id</th><th scope="col">"Group</th><th scope="col">Value</th>
    </tr><tr>
        <td align="center" valign="middle">1</td><td align="center" valign="middle">1</td><td align="center" valign="middle">100</td>
    </tr><tr>
        <td align="center" valign="middle">2</td><td align="center" valign="middle">1</td><td align="center" valign="middle">120</td>
    </tr><tr>
        <td align="center" valign="middle">3</td><td align="center" valign="middle">1</td><td align="center" valign="middle">100</td>
    </tr><tr>
        <td align="center" valign="middle">4</td><td align="center" valign="middle">2</td><td align="center" valign="middle">90</td>
    </tr><tr>
        <td align="center" valign="middle">5</td><td align="center" valign="middle">2</td><td align="center" valign="middle">105</td>
    </tr><tr>
        <td align="center" valign="middle">6</td><td align="center" valign="middle">3</td><td align="center" valign="middle">300</td>
    </tr><tr>
        <td align="center" valign="middle">7</td><td align="center" valign="middle">4</td><td align="center" valign="middle">123</td>
    </tr><tr>
        <td align="center" valign="middle">8</td><td align="center" valign="middle">4</td><td align="center" valign="middle">110</td>
    </tr><tr>
        <td align="center" valign="middle">9</td><td align="center" valign="middle">5</td><td align="center" valign="middle">100</td>
    </tr><tr>
        <td align="center" valign="middle">10</td><td align="center" valign="middle">5</td><td align="center" valign="middle">110</td>
    </tr>
</table>

and I write a script for navigate between rows :

var SelectedRowIndex;

    $(document).ready(function () {
        $('.ArrowNav tr').first().css('background-color', 'yellow');
        //            $('.ArrowNav tr').first().focus();
        $('.ArrowNav tr:first').first().trigger('click');
        SelectedRow = 0;

        function ResetAllRowColor() {
            $('.ArrowNav tr').each(function () {
                $(this).css('background-color', 'white');
            });
        }

        $('.ArrowNav tr').on('keyup', function (e) {
            ResetAllRowColor();
            switch (e.keyCode) {
                case 40: //Down
                    SelectedRow++;
                    $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
                    break;
                case 38: //Up
                    SelectedRow--;
                    $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
                    break;
            }
        });

        $('.ArrowNav tr').on('click', function () {
            alert('a');
        });
    });

the problem is for navigating the table must have focus on it.I write this code for set focus: $('.ArrowNav tr').first().focus(); but it didn’t work.I also write this code : $('.ArrowNav tr:first').first().trigger('click'); but click event on rows does not fire.I want in page load I can navigate between rows buy arrow keys. where is the problem?

jsfiddle

thanks

Answer 1

Scoping & Selecting issue.

Click event cannot be called before the click function has been defined.

$('.ArrowNav tr').on('click', function () {
    alert('a');
});
$('.ArrowNav tr').eq(0).click();

The keys event up/down cannot be bound to a table because a table cannot gain focus. The document starts with the focus right away, so you can bind the keyup/down event to it.

    $(document).on('keyup', function(e) {
    ResetAllRowColor();
    switch (e.keyCode) {
    case 40:
        //Down
        SelectedRow++;
        $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
        break;
    case 38:
        //Up
        SelectedRow--;
        $('.ArrowNav tr').eq(SelectedRow).css('background-color', 'yellow');
        break;
    }
});​

your working jsFiddle