我有一个文本类型的输入,用于使用 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;
}
});
};
}
我拼凑了一把小提琴给你玩http://jsfiddle.net/7BcZA/2/ http://jsfiddle.net/7BcZA/2/
Summary:
当您“悬停”一行时,向其中添加一个类。我的叫selected
。这表明它已被选中,并添加了 CSS 样式。删除班级selected
从上一个tr
已被选中。
根据按下的按钮获取下一个或上一个标签。
作为奖励,我添加了您正在寻找的“按输入”功能=)
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)