如何在<tr>检查是否按下了键

How do I onmouseover in a <tr> check to see if a key was pressed

本文关键字：是否 检查 tr lt gt      更新时间：2023-09-26

我有一个大表，里面有很多数据。基本上，我想检查一下，当有人在<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');
      }
    });
  });
});

根据您的示例，关于为什么$('#report tr')没有接收到keypress事件：

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

(https://api.jquery.com/keypress/)

然而，您不能简单地用$('#report tr').focus():来关注$('#report tr')

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

(https://api.jquery.com/focus/)

如果您希望给予$('#report tr')焦点，则需要在$('#report tr')元素上设置tabindex。

如何实现的示例：

<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>

我会这样做：

 $(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');
        });
    });

这里有一个片段，可以做你想做的事情：

$(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变量表示"遮光"是打开还是关闭。

activate键（F）仅在将鼠标悬停在表上时有效，但在任何表单元素处于活动状态时无效。

每当鼠标在tr中从一个元素移动到另一个元素时，就会触发mouseover，因此它的处理程序有一些额外的检查。

mouseenter处理程序使表在悬停在其上时自动接收按键，无需单击即可首先激活表。

mouseleave处理程序停止表以接收按键，并消除"断电"。

表的tabindex被设置为-1，以使表能够接收焦点，但使其脱离选项卡顺序。

相关文章：