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

我稍微改变了一下。首先为next和previous定义两个函数。

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

Answer 2

JSfiddle

这是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 个答案:

不要重复自己。使用功能。保持简单