我复制了一个表格和一个输入，用户可以使用输入字段搜索或关注行。但是有两个问题。
- 当用户输入行号时，表显示错误的行，例如用户输入15，表显示行号16。
- 我想要用户输入一个数字时，然后按" Enter"键会从鼠标中单击。 不必单击。
这是完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js">
</script>
<title>Untitled</title>
<style type="text/css">
table{
margin:5px;
}
td{
padding:3px;
}
tr.active{
background-color:green;
color: white;
}
#control{
line-height:20px;
padding:3px;
position:fixed;
top:0;
left:0;
right:0;
background-color:#999955
}
.t-div{
border: 2px solid black;
width: 250px;
height: 350px;
margin: 50px 15px 15px 15px;
}
</style>
</head>
<body>
<div id="control">
Line <input type="text" size="15" id="line" /><button type="button"
class="btn btn-info"> Search </button>
</div>
<div class="t-div" style="overflow-y: auto;">
<table style="overflow-y: auto;">
<tr>
<td>1</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>2</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>3</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>4</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>5</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>6</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>7</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>8</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>9</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>10</td>
<td>This is the line 0 of the table</td>
</tr>
</table>
</div>
<script type="text/javascript">
var row = $('tr');
var table = $('table');
$('#control button').click(function(){
var w = $('.t-div');
var row = table.find('tr')
.removeClass('active')
.eq(+$('#line').val())
.addClass('active');
if (row.length){
w.scrollTop( row.offset().top - (w.height()/2) );
}
});
</script>
</body>
</html>
检查此EQ是基于零的，并且为了支持enter，您需要绑定键盘事件和触发按钮。
检查此演示：
var row = $('tr');
var table = $('table');
$('#control button').click(function() {
var w = $('.t-div');
var row = table.find('tr')
.removeClass('active')
.eq(Number($('#line').val())-1)
.addClass('active');
if (row.length) {
w.scrollTop(row.offset().top - (w.height() / 2));
}
});
$("#line").on('keyup', function (e) {
if (e.keyCode == 13) {
$('#control button').trigger('click')
}
});<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js">
</script>
<title>Untitled</title>
<style type="text/css">
table {
margin: 5px;
}
td {
padding: 3px;
}
tr.active {
background-color: green;
color: white;
}
#control {
line-height: 20px;
padding: 3px;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #999955
}
.t-div {
border: 2px solid black;
width: 250px;
height: 350px;
margin: 50px 15px 15px 15px;
}
</style>
</head>
<body>
<div id="control">
Line <input type="text" size="15" id="line" /><button type="button" class="btn btn-info"> Search </button>
</div>
<div class="t-div" style="overflow-y: auto;">
<table style="overflow-y: auto;">
<tr>
<td>1</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>2</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>3</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>4</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>5</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>6</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>7</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>8</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>9</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>10</td>
<td>This is the line 0 of the table</td>
</tr>
</table>
</div>
</body>
</html>要达到预期结果，请使用以下选项
-
找到TR后使用-1，因为TR数组的索引以0
开头.eq（ $（'＃line'）。val（）-1）
-
触发单击，在Enter Keydown事件上
$（"＃line"）。on（" keydown"，function（e）{ var key = e.th; 如果（key == 13）{ $（"＃控制按钮"）。单击（）; 返回false; }}）;
codepen -https：//codepen.io/nagasai/pen/xonpop
var row = $('tr');
var table = $('table');
$('#control button').click(function(){
var w = $('.t-div');
var row = table.find('tr')
.removeClass('active')
.eq(+$('#line').val() -1)
.addClass('active');
if (row.length){
w.scrollTop( row.offset().top - (w.height()/2) );
}
});
$('#line').on('keydown', function (e) {
var key = e.which;
if(key == 13) {
$('#control button').click();
return false;
}
});<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js">
</script>
<title>Untitled</title>
<style type="text/css">
table{
margin:5px;
}
td{
padding:3px;
}
tr.active{
background-color:green;
color: white;
}
#control{
line-height:20px;
padding:3px;
position:fixed;
top:0;
left:0;
right:0;
background-color:#999955
}
.t-div{
border: 2px solid black;
width: 250px;
height: 350px;
margin: 50px 15px 15px 15px;
}
</style>
</head>
<body>
<div id="control">
Line <input type="text" size="15" id="line" /><button type="button"
class="btn btn-info"> Search </button>
</div>
<div class="t-div" style="overflow-y: auto;">
<table style="overflow-y: auto;">
<tr>
<td>1</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>2</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>3</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>4</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>5</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>6</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>7</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>8</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>9</td>
<td>This is the line 0 of the table</td>
</tr>
<tr>
<td>10</td>
<td>This is the line 0 of the table</td>
</tr>
</table>
</div>
</body>
</html>