3

jqueryを使用して非同期テーブル行検索を実行するために使用されるテキストタイプの入力があります。検索入力に.on関数をアタッチし、キーを押すと、hoverDown（）という関数を呼び出しています。下矢印キーが押されたときに発生したいのは、テーブルの行にカーソルを合わせるということです。そして、テーブルの行を矢印キーでホバーし、ユーザーがEnterキーを押すと、hrefを起動して、ユーザーをその関連ページに移動させたいと思います。私はe.keyCodeを検出することができますが、それは私が取得できた範囲であり、ここからどこに取得するかは本当にわかりません。関連コード：

// HTML

<div id="main">
<input type="text" class="table-search" id="search" autocomplete="off"   placeholder="Search Clients…">
<table class="table" id="tblData">
<thead><tr><th>Name</th> <th>Title</th></tr></thead>
<tbody>
<tr><td><a href="http://lar.loc/cases">Scott</a></td> <td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Billy</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">George</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Sara</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">John</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Megan</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Ben</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jully</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Bethany</a></td><td>Client</td></tr><tr><td><a href="http://lar.loc/cases">Alen</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Jane</a></td><td>Client</td></tr>
<tr><td><a href="http://lar.loc/cases">Alice</a></td><td>Client</td></tr></tbody></table>
</div>

// javascript

$(document).ready(function(){
    $("#main").on("keydown", "#search", function(e){
    hoverDown();
    });
});


function hoverDown()
{
    if ($(document).keydown()) {
        $(document).keydown(function(e){

            if (e.keyCode == 40) { 
                alert("down");
                e.keyCode = null;
            }
            if (e.keyCode == 38) { 
                alert("up");
                e.keyCode = null;
            }

        });
    };
}
4

1 に答える 1

3

私はあなたがhttp://jsfiddle.net/7BcZA/2/で遊ぶためにフィドルを一緒に投げました

概要：

行を「ホバー」するときは、その行にクラスを追加します。鉱山はと呼ばれてselectedいます。これにより、選択されていることが識別され、CSSスタイルが追加されます。selected選択した前のクラスからクラスを削除しtrます。

ボタンが押されたことに基づいて、次または前のタグを取得します。

ボーナスとして、私はあなたが探していた「プレスエンター」機能を追加しました=)。

于 2013-02-18T00:52:59.393 に答える