Question

我有一张包含大量数据的大表。基本上我试图检查，如果有人在<tr>上空盘旋时按下了一封信。我尝试做的事情基本上是在整个屏幕上停电，除了有人按下字母f以便它基本上只关注那一行时悬停的行。在大量数据中更容易看到。

这是我到目前为止所拥有的。不知道我是否朝着正确的方向前进，但它没有检测到我按下这封信。此外，如果他们再次按f或esc或点击行外，我希望它恢复正常。

$(function(){

  $('#report tr').on('mouseover',function(){
    $('#report tr').removeClass('sel');
    $(this).addClass('sel');

    $(this).keypress(function(event){
      if(event==70){
        alert('hello');
      }
    });

  });

});

Answer 1

我会做这样的事情：

 $(function () {
        $('#report tr').hover(
            function () {
                $(this).addClass('sel');
            },function(){
                $(this).removeClass('sel')
            });

        $(document).keypress(function (e) {
            if (e.keyCode == 102) //if they pressed f
                //do something with the selected item 
        });
    });

基本上，只需将按键事件附加到文档，而不是尝试将其附加到悬停功能中的特定元素。

编辑：根据您的评论，这是另一种可能性。请注意，您还需要添加一种方法来删除sel类：

    $(function () {
        var currentElement;
        $('#report tr').hover(
            function () {
                currentElement = $(this); 
            });

        $(document).keypress(function (e) {
            if (e.keyCode == 102) //if they pressed f
                currentElement.addClass('sel');
        });
    });

Answer 2

在您的示例中，为什么$('#report tr')未收到keypress事件：

按键事件处理程序可以附加到任何元素，但事件只发送给具有焦点的元素。

（https://api.jquery.com/keypress/）

但是，您不能只关注$('#report tr')与$('#report tr').focus()：

焦点事件在获得焦点时发送到元素。此事件隐式适用于有限的元素集，例如表单元素（，等）和链接（）。在最近的浏览器版本中，可以通过显式设置元素的tabindex属性来扩展事件以包括所有元素类型。

（https://api.jquery.com/focus/）

如果您想提供$('#report tr')焦点，则需要在tabindex元素上设置$('#report tr')。

如何实施的一个例子：

<html>
    <head>
        <title>Pass keypress event to TR</title>
    </head>
    <body>
        <table>
            <tr tabindex="1">
                <td>data 1</td>
                <td>data 2</td>
            </tr>
            <tr tabindex="2">
                <td>data 3</td>
                <td>data 4</td>
            </tr>
        </table>
        <script type="application/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
        <script type="application/javascript">
            $(function() {
                $rows = $('table tr');
                $rows.keypress(function(e) {
                    if (e.which == 102) {
                        $(this).css('background-color', '#ff0000');
                    }
                });
                $rows.on('mouseover', function(e) {
                    $(this).focus();
                });
            });
        </script>
    </body>
</html>

Answer 3

这是一个几乎完全符合你想要的代码：

$(document).ready(function () {
    var currentRow = null,           // Stores the currently hovered TR
        fKey = false,                // Indicates, if F has been pressed
        table = $('#table'),         // Holder for the table
        stopBlackout = function () { // Removes "blackout"
            $('body').removeClass('blackout');
            if (currentRow) {
                currentRow.removeClass('hilite');
            }
        },
         // Starts "blackout"
        startBlackout = function (row) { // row = row element
            row.addClass('hilite');
            $('body').addClass('blackout');
            if (currentRow[0] !== row[0]) { // Remove hilite if different row only
                currentRow.removeClass('hilite');
            }
            currentRow = row;
        },
         // Keydown listener toggles "blackout"
        toggleBlackout = function (e) { // e = event object
            if ('form' in e.target) {return;} // Exit if a form element is active
            if (e.which === 27 || e.which === 70) { // Action when hit Esc or F only
                fKey = !fKey;
                if (e.which === 27) {
                    fKey = false;
                }
                if (!fKey) {
                    stopBlackout();
                } else if (currentRow) { // Start "blackout" when having a hovered row
                    startBlackout(currentRow);
                }
            }
        };
    table.mouseenter(function () { // Activate table to receive key presses
        this.focus();
    });
    table.mouseleave(function () { // End "blackout" and stop receiving keypresses
        stopBlackout();
        table.blur();
    });
    table.keydown(toggleBlackout);
    table.mouseover(function (e) { // Highlight active row according to mouse hover
        var row = $(e.target);
        if (row[0].tagName !== 'TR') { // Usually TD or other element triggers mouseover
            row = row.closest('tr'); // Set target to TR
            if (!row.length) {return;} // Exit if e.target was TBODY or TABLE
            if (fKey) {
                startBlackout(row);
            }
            currentRow = row; // Update the currently hovered row holder
        }
    });
});

.blackout {
    background: #000000;
}
.hilite {
    background: #ffffff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="table" tabindex="-1">
    <tr><td>R1<b>C</b>1</td><td>R1C2</td></tr>
    <tr><td>R1C2</td><td>R2C2</td></tr>
    <tr><td>R1C3</td><td>R3C2</td></tr>
    <tr><td>R1C4</td><td>R4C2</td></tr>
</table>

一些解释

所有事件都附加到表元素，而不是它的子元素。这会减少页面上的事件侦听器并使其更快，尤其是在表非常大的情况下。在添加这些侦听器之前，该表必须存在，但您可以在之后添加内容。

使用

keydown，因为 Esc 不会在所有浏览器中触发keypress。代码中的fKey变量表示“停电”是打开还是关闭。

激活密钥（ F ）仅在将鼠标悬停在表上时起作用，但在任何表单元素处于活动状态时不起作用。

每次将鼠标从一个元素移动到mouseover内的另一个元素时，

tr会被触发，因此它的处理程序会有一些额外的检查。

mouseenter处理程序使表格在盘旋时自动接收按键，无需先点击激活表格。

mouseleave处理程序停止表以接收按键，并删除“停电”。

该表的

tabindex设置为-1，以使表格能够获得焦点，但将其从标签顺序中删除。

如何在支票上查看按键是否被按下

3 个答案: