Question

我有一个带有twitter bootstraps的HTML表格。

当我点击表格时，javascript会获得一个id并填充一个包含信息的模态。像这样：

$('.table > tbody > tr').click(function() {
   //lots of things happens
});

 <div class="modal fade">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
               <!-- lots of information loaded with AJAX --->
            </div>
        </div>
    </div>

这样可以正常工作，但是我希望不仅可以点击，而且可以使用按钮进行导航（按下键会向下按，按键会一直向上）。

任何建议都将不胜感激。

Answer 1

首先，您需要使用函数包装代码并从Click处理程序中调用它：

var $table = $('.table'),
    $tableRows = $table.find('tbody > tr');

$tableRows.click(function() {
    rowToModal($(this));
});

function rowToModal($row) {
    $tableRows.removeClass('active-row');
    $row.addClass('active-row');

    //lots of things happens
}

然后，你可以为＆＃34; keydown＆＃34;制作处理程序。事件：

$(document).on('keydown', function(e) {
    if (/*check if modal is currently open*/ ) {
        var $currentRow = $($table.find('.active-row')),
            $nextRow;

        if (e.key == 'ArrowDown') {
            $nextRow = $currentRow.next();
        } else if (e.key == 'ArrowUp') {
            $nextRow = $currentRow.prev();
        }

        if ($nextRow && $nextRow.length) {
            rowToModal($nextRow );
        }
    }
});

Answer 2

您将捕获整个文档的关键输入并随意修改您需要的内容，这是箭头键的基本模板。如果您需要其他密钥，这是一个有用的网站，可以让他们https://yangwangteaching.wordpress.com/data-science-meetup/

document.onkeydown = checkKey;

function checkKey(e) {

    e = e || window.event;

    if (e.keyCode == '38') {
        // up arrow
    }
    else if (e.keyCode == '40') {
        // down arrow
    }
    else if (e.keyCode == '37') {
       // left arrow
    }
    else if (e.keyCode == '39') {
       // right arrow
    }

}

Javascript中带键盘的可导航菜单

2 个答案: