Javascript 使用向上和向下箭头键滚动（突出显示）HTML表格中的行
我似乎无法使用键盘上的上下箭头键在HTML表格中导航（突出显示行）。需要注意的是，单击一行并按下向上或向下箭头键后，高亮显示的行应相应移动 我做错了什么 以下是HTML标记：Javascript 使用向上和向下箭头键滚动（突出显示）HTML表格中的行,javascript,jquery,Javascript,Jquery,我似乎无法使用键盘上的上下箭头键在HTML表格中导航（突出显示行）。需要注意的是，单击一行并按下向上或向下箭头键后，高亮显示的行应相应移动 我做错了什么 以下是HTML标记： <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <styl
<!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>
.亮点{
背景色：rgb（255,0,0）；
}
window.onload=函数（）{
var rowCount=$（'#data>tbody>tr'）。长度；
$（“#maxrows”）.val（行数）；
var$tbody=$（“#数据tbody”）。在（'click'，'tr'，function（）上{
突出显示（$（此））；
});
$（'goto#u first'）。单击（函数（）{
var$first=$tbody.find（'tr'）.first（）；
突出显示（$第一）；
});
$（'goto#u prev'）。单击（函数（）{
var$prev=$tbody.find（'.highlight'）.prev（）；
突出显示（$prev）；
});
$（“#转到下一步”）。单击（函数（）{
var$next=$tbody.find（'.highlight'）.next（）；
突出显示（下一步）；
});
$（'goto#u last'）。单击（函数（）{
var$last=$tbody.find（'tr'）.last（）；
突出显示（$last）；
});
$（“#转到行”）。单击（函数（）{
var$row=提示（“输入行号”）
突出显示（$（“#数据tr”）.eq（$row））；
});
$（“#删除_行”）。单击（函数（）{
var$row=$tbody.find（'.highlight'）
$row.remove（）；
重新编号（）
});
$（'#data tr'）.keydown（函数（e）{
如果（e.which==40）{//向下箭头
var$row=$tbody.find（'.highlight'）
突出显示（$行）；
}
如果（e.which==38）{//向上箭头
var$row=$tbody.find（'.highlight'）
突出显示（$行）；
}
});
功能突出显示（$row）{
如果（$row.length）{
$t body.children（）.removeClass（“突出显示”）；
$row.addClass（'highlight'）；
$（“#rownum”）.val（$row[0].rowIndex）；
}
}
函数重新编号行（）{
$（'#data tr'）。每个（函数（索引，el）{
$（this）.children（'td'）.first（）.text（index++）；
});
}
}
#
校长2
校长3
校长4
校长5
1.
数据
数据
数据
数据
2.
数据
数据
数据
数据
3.
数据
数据
数据
数据
4.
数据
数据
数据
数据
5.
数据
数据
数据
数据
6.
数据
数据
数据
数据
行数：
属于
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);
$(document).keydown(function (e) {
if ( $tbody.find('.highlight').length ) {
if (e.which == 40) {//down arrow
gotoNext();
}
else if (e.which == 38) {//up arrow
gotoPrevious();
}
}
});
这是一个。我想把它改大一点。首先为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);
$(document).keydown(function (e) {
if ( $tbody.find('.highlight').length ) {
if (e.which == 40) {//down arrow
gotoNext();
}
else if (e.which == 38) {//up arrow
gotoPrevious();
}
}
});
$(document).keydown(function (e) {
switch(e.which)
{
case 38:
$('#goto_prev').trigger('click');
break;
case 40:
$('#goto_next').trigger('click');
break;
}
});
$(document).keydown(function (e) {
switch(e.which)
{
case 38:
$('#goto_prev').trigger('click');
break;
case 40:
$('#goto_next').trigger('click');
break;
}
});
这应该适合你的需要。它对任何正在寻找一种非常简单的方法的人都非常有用。我建议你改进一下。调整它。在keydow事件中，您需要使用.highlight获取当前元素的$.next（）和$.prev（），而不是$.find（）。我可以推荐一种非常简单的上/下导航方法吗：？它不是您问题的明确答案，因此不会将其作为答案发布。在keydow事件中，您需要使用.highlight获取当前元素的$.next（）和$.prev（），而不是$.find（）。我可以推荐一种非常简单的上下导航方法吗：？这不是对你的问题的明确回答，因此没有将其作为答案发布。谢谢这个Kev。它可以正常工作，但现在我没有鼠标控制，无法单击并高亮显示一行。我如何使用索引功能将其与您的代码集成？@JasonKelly不客气。您必须在单击
trhighlight（）