如何使用JavaScript中的输入字段专注于行？

时间：2018-12-19 05:26:15

标签： javascript html css

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

  1. 当用户输入行号时，表显示错误的行，就像用户输入15时一样，表显示行号16。
  2. 我想在用户输入数字时按“ 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>

2 个答案:

答案 0 :(得分：0)

检查this out 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>

答案 1 :(得分：0)

要获得预期结果，请使用以下选项

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

    .eq（+ $（'＃line'）。val（）-1）

  2. 在输入keydown事件时单击，触发

    $（“＃line”）。on（“ keydown”，function（e）{   var key = e.which;   如果（key == 13）{     $（“＃control button”）。click（）;     返回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>

相关问题
最新问题