1

I Copied a Table and an input where user can search or focus on a row by using input field. But there are 2 issues.

  1. When user enter a row number, table shows wrong row like if user enters 15, the table shows row number 16.
  2. I want when user enter a number, then user gets result by pressing "ENTER" key, it is not necessary to click from mouse.

Here is complete code:

<!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>
ic3b3rg
  • 14,629
  • 4
  • 30
  • 53
Kami
  • 43
  • 1
  • 1
  • 6
  • https://stackoverflow.com/questions/11001762/how-to-get-the-enter-key-within-a-textbox-to-trigger-a-function-and-not-the-firs try it. – Rahul Dudharejiya Dec 19 '18 at 05:29
  • For accessibility reason, browser consider input keypress enter as click event for form or next submit button. is normal behavior and i don't recommand you to prevent this default behavior. – Yanis-git Dec 19 '18 at 05:30

2 Answers2

0

Check this out eq is zero based and to support the enter you need to bind the keyup event and trigger button click.

Check this demo:

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>
Just code
  • 13,553
  • 10
  • 51
  • 93
0

To achieve expected result , use below option

  1. Use -1 after finding tr , as index of tr array starts with 0

    .eq(+$('#line').val() -1)

  2. Trigger click , on enter keydown event

    $("#line").on("keydown", function(e) { var key = e.which; if (key == 13) { $("#control button").click(); return 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>
Naga Sai A
  • 10,771
  • 1
  • 21
  • 40