如何使向上和向下箭头键导航表的行，并以编程方式将sudo应用到这些行？ [英] How can I make the up and down arrow keys navigate a table's rows, and programmatically apply the sudo :hover to those rows?

问题描述

我有一个类型文本的输入，用于使用jquery执行异步表行搜索。
我有一个.on函数附加到搜索输入和按键，我调用一个名为hoverDown（）的函数。当按下向下箭头键时，我想要发生的是将鼠标悬停在表格行上。并且当一个表格行用箭头键悬停，并且用户点击enter时，我希望href触发并将用户带到相关页面。我能够检测到e.keyCode，但这是关于我已经能够得到，我真的不知道从哪里拿到它。相关代码：

// HTML

 < div id = 主 > 
< input type =textclass =table-searchid =searchautocomplete =offplaceholder =Search Clients ...> 
< table class =tableid =tblData> 
< thead>< tr>< th>名称< / th> <的第i;标题< /第>< / TR>< / THEAD> 
< tbody> 
< tr>< td>< a href =http：//lar.loc/cases> Scott< / a>< / td> < TD>客户< / TD>< / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Billy< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> George< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Sara< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> John< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Megan< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Ben< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Jully< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Bethany< / a>< / td>< td>客户端< / td>< ; / tr>< tr>< td>< a href =http：//lar.loc/cases> Alen< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Jane< / a>< / td>< td>客户端< / td>< ; / TR> 
< tr>< td>< a href =http：//lar.loc/cases> Alice< / a>< / td>< td>客户端< / td>< ; / TR>< / tbody的>< /表> 
< / div> 
  

// javascript

 on（keydown，#search），function（e）{
 hoverDown （）; 
}）; 
}）; 
 
 
函数hoverDown（）
 {
 if（$（document）.keydown（））{
 $（document）.keydown（function e）{
 
 if（e.keyCode == 40）{
 alert（down）; 
 e.keyCode = null; 
} 
如果（e.keyCode == 38）{
 alert（up）; 
 e.keyCode = null; 
} 
 
}）; 
}; 
} 
  

解决方案

我把一个小提琴你可以玩 http://jsfiddle.net/7BcZA/2/

总结：

当您悬停一行时，向其中添加一个类。矿被称为选择。这标识它被选中，以及添加CSS样式。从以前选择的 tr 中删除​​所选的类。

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

I have an input of type text that is used to perform asynchronous table row searches using jquery. I have an .on function attached to the search input and on key down, I'm calling a function called hoverDown(). What I would like to happen when the down arrow key is pressed, is to hover over the table rows. And when a table row is hovered over with the arrow key, and the user hits enter, I would like for the href to fire and take the user to that related page. I am able to detect the e.keyCode but that's about as far as I've been able to get and I really don't know where to take it from here. Relevant Code:

//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;
            }

        });
    };
}

解决方案

I threw together a fiddle for you to play around with http://jsfiddle.net/7BcZA/2/

Summary:

When you "hover" a row, add a class to it. Mine is called selected. This identifies that it's selected, as well as adds CSS styling. Remove the class selected from the previous tr that was selected.

Get the next or previous tag based on which was button was pressed.

As a bonus, I added the "press enter" functionality that you were looking for =).

这篇关于如何使向上和向下箭头键导航表的行，并以编程方式将sudo应用到这些行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！