使用向上和向下箭頭鍵滾動（突出顯示）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

不要重復自己。使用功能。把事情簡單化