使用向上和向下箭头键滚动（突出显示）HTML表中的行

Question

我似乎无法使用键盘上的向上和向下箭头键在HTML表中进行导航（突出显示行）。 应该注意的是，一旦单击一行并单击向上或向下箭头键，突出显示的行应相应移动。

我究竟做错了什么？

这是HTML标记：

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

<style type="text/css">

.highlight {

    background-color: rgb(255,0,0);

}

</style>

<script type="text/javascript">

window.onload = function() {

var rowCount = $('#data >tbody >tr').length;
$("#maxrows").val(rowCount);

    var $tbody = $("#data tbody").on('click', 'tr', function() {
            highlight($(this));
    });


    $('#goto_first').click(function() {
        var $first = $tbody.find('tr').first();
            highlight($first);
    });

    $('#goto_prev').click(function() {
        var $prev = $tbody.find('.highlight').prev();
            highlight($prev);
    });


    $('#goto_next').click(function() {
        var $next = $tbody.find('.highlight').next();
            highlight($next);
    });

    $('#goto_last').click(function() {
        var $last = $tbody.find('tr').last();
            highlight($last);
    });

    $('#goto_row').click(function() {

        var $row = prompt("Enter row number")

        highlight($("#data tr").eq($row));

    });

    $('#remove_row').click(function() {

        var $row = $tbody.find('.highlight')

        $row.remove();

        renumberRows()

    });


    $('#data tr').keydown(function (e) {

        if (e.which == 40) {//down arrow
            var $row = $tbody.find('.highlight')

            highlight($row);
        }

          else if (e.which == 38) {//up arrow
            var $row = $tbody.find('.highlight')

            highlight($row);
        }

     });

    function highlight($row) {
            if ($row.length) {
                $tbody.children().removeClass("highlight");
                $row.addClass('highlight');
                $("#rownum").val($row[0].rowIndex);
            }
    }

    function renumberRows() {
        $('#data tr').each(function(index, el){
            $(this).children('td').first().text(index++);
        });
    }

}
</script>

</head>

<body>

<table id="data" border="1" cellspacing="1" cellpadding="1">

    <thead>
        <tr>
            <th>#</th>
            <th>header2</th>
            <th>header3</th>
            <th>header4</th>
            <th>header5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>2</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>3</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>4</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>5</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
        <tr>
            <td>6</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
            <td>data</td>
        </tr>
    </tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum" readonly><br>
of
<br>
<input type="text" id="maxrows" readonly>
<br>
<input type="button" id="goto_first" value="first">
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
<input type="button" id="goto_row" value="goto row">
<input type="button" id="remove_row" value="remove row">

</body>
</html>

Answer 1

我会稍微改一下。 首先为下一个和上一个定义两个功能。

function gotoNext(){
    var $next = $tbody.find('.highlight').next();
        highlight($next);
}

function gotoPrevious () {
    var $prev = $tbody.find('.highlight').prev();
        highlight($prev);
}

然后，在现有的点击处理程序中使用它们。

$('#goto_prev').click(gotoPrevious);

$('#goto_next').click(gotoNext);

并在需要附加到文档的keydown处理程序中使用它们：

$(document).keydown(function (e) {

  if ( $tbody.find('.highlight').length ) {

    if (e.which == 40) {//down arrow
        gotoNext();
    }

    else if (e.which == 38) {//up arrow
        gotoPrevious();
    }
 }

 });

请注意，我添加了一项检查以确保表格中已突出显示某些内容，以确保您没有捕获正常的上/下滚动。

这是Codepen的示例。

Answer 2

JS小提琴

这是keydown事件的功能。 我还做了一个简单的功能来突出显示TR。 看一看。

该系统与您的系统不同。 我只是向您展示另一种方法。

我决定使用.index（）确定位置。 我发现这非常有用且快速。

$(document).keydown(function (e) {

  switch(e.which) 
  {
       case 38:
           $('#goto_prev').trigger('click');
           break;
       case 40:
           $('#goto_next').trigger('click');
           break;
   }

});

不要重复自己。使用功能。把事情简单化

function highlight(tableIndex) {
    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > $('#data tbody tr').length )
        tableIndex = 0;

    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0)
    {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');

        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');
    }
}

在此示例中，键盘键和按钮均有效。 我还做了一张支票，如果您到达表格末尾，就可以重新开始。

这应该适合您的需求。 对于任何正在寻找一种非常简单的方法的人来说，它也将非常有用。 我建议您改善它。 适应它。

使用向上和向下箭头键滚动（突出显示）HTML表中的行

问题描述

2 个解决方案

解决方案1
3 2014-05-22 20:29:25

解决方案2
3 已采纳 2014-05-22 20:30:08

不要重复自己。使用功能。把事情简单化

使用向上和向下箭头键滚动（突出显示）HTML表中的行

问题描述

2 个解决方案

解决方案1 3 2014-05-22 20:29:25

解决方案2 3 已采纳 2014-05-22 20:30:08

不要重复自己。 使用功能。 把事情简单化

解决方案1
3 2014-05-22 20:29:25

解决方案2
3 已采纳 2014-05-22 20:30:08

不要重复自己。使用功能。把事情简单化