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 に答える