如何使用 JavaScript 中的输入字段关注行？答案

【问题标题】：How to focus on row using input field in JavaScript?如何使用 JavaScript 中的输入字段关注行？
【发布时间】：2019-05-19 13:57:14
【问题描述】：

我复制了一个表格和一个输入，用户可以使用输入字段在其中搜索或关注一行。但是有两个问题。

当用户输入行号时，表格显示错误的行，如用户输入 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>

【问题讨论】：

stackoverflow.com/questions/11001762/… 试试看。
出于可访问性的原因，浏览器将输入按键回车视为表单或下一个提交按钮的点击事件。是正常行为，我不建议您阻止这种默认行为。

标签： javascript html css

【解决方案1】：

要达到预期效果，请使用以下选项

找到 tr 后使用 -1 ，因为 tr 数组的索引从 0 开始

.eq(+$('#line').val() -1)
触发 click , on enter keydown 事件

$("#line").on("keydown", function(e) { var key = e.which; 如果（键 == 13）{ $("#control button").click(); 返回假； } });

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>

【讨论】：

欣赏一下兄弟

【解决方案2】：

检查this out eq 是否从零开始，要支持enter，您需要绑定keyup 事件并触发按钮点击。

查看此演示：

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>

【讨论】：