3

我有一个文本类型的输入，用于使用 jquery 执行异步表行搜索。我有一个附加到搜索输入的 .on 函数，在按下键时，我正在调用一个名为 hoverDown() 的函数。当按下向下箭头键时，我希望将鼠标悬停在表格行上。当用箭头键悬停在表格行上时，用户按回车键，我希望触发 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选择的类中删除该类。

根据按下的按钮获取下一个或上一个标签。

作为奖励，我添加了您正在寻找的“按 Enter”功能=)。

于 2013-02-18T00:52:59.393 回答