0

请考虑以下代码：

我有一张这样的桌子：

<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>

我编写了一个用于在行之间导航的脚本：

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');
        });
    });

问题是导航表必须关注它。我为设置焦点编写了这段代码：$('.ArrowNav tr').first().focus();但它没有用。我也写了这段代码：$('.ArrowNav tr:first').first().trigger('click');但是行上的单击事件不会触发。我想在页面加载中我可以在行之间导航购买箭头键。哪里有问题？

jsfiddle

谢谢

4

3 回答 3

2

范围和选择问题。

在点击函数被定义之前不能调用点击事件。

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

该keys事件up/down无法绑定到表格，因为表格无法获得焦点。文档立即以焦点开始，因此您可以将 keyup/down 事件绑定到它。

    $(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;
    }
});​

你的工作 jsFiddle

于 2012-11-13T09:26:23.127 回答
1

您在设置任何事件之前触发点击。你应该搬家

$('.ArrowNav tr').first().trigger('click');

下

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

然后另一个问题是您不能将 onkey* 函数或焦点函数放在表格行/列上。您只能聚焦接受用户输入的元素。

于 2012-11-13T09:29:34.650 回答
0 
<table>
  <tr tabindex="-1" onkeyup="alert(event);">
    <td>click me</td>
  </tr>
</table>

tabindex应该给行焦点。

于 2012-11-13T12:21:43.247 回答