Jquery Table Selector with bootstrap

Question

I have a bootstrap table and in one of the columns I have a hidden record button. Wanted to click on the existing input, that this button appeared.

I’m tired of trying to make several ways of selectors but so far none worked.

What I currently have is like this:

<tr>
   <td>5103</td>
   <td class="text-center"><i class="fa fa-share-alt-square text-red"></i></td>
   <td>1961-0679x</td>
   <td> Abraçadeira união escape</td>
   <td>Acessórios escapes cross</td>
   <td class="text-center"> 
   <div class="input-group">
      <input class="form-control input-sm text-right" type="text" placeholder="19.99" value="19.99">
      <span class="input-group-addon"><i class="fa fa-eur"></i></span>
      <button class="btn btn-success btn-xs hidden btnGravar">Gravar</button>
   </div>
</td>
</tr>

In Jquery I have:

$(function(){
    $(".input-group input").click(function(){
        $(this).select();
        $(this).next().next().removeClass('hidden');
    });
});

But it does not show the button that this Hidden.

Aguma helps?

Answer 1

You can use the functions "focusin" and "focusout":

$(function(){
    $(".input-group input").focusin(function(){
        $(this).parent().find('.btnGravar').removeClass('hidden');
    })
.focusout(function(){
        $(this).parent().find('.btnGravar').addClass('hidden');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<table class="table table-striped">
  <tr>
     <td>5103</td>
     <td class="text-center"><i class="fa fa-share-alt-square text-red"></i></td>
     <td>1961-0679x</td>
     <td> Abraçadeira união escape</td>
     <td>Acessórios escapes cross</td>
     <td class="text-center"> 
     <div class="input-group">
        <input class="form-control input-sm text-right" type="text" placeholder="19.99" value="19.99">
        <span class="input-group-addon"><i class="fa fa-eur"></i></span>
        <button class="btn btn-success btn-xs hidden btnGravar">Gravar</button>
     </div>
  </td>
  </tr>
</table>

Answer 2

I usually go to the parent() and then give a find() in the element that needs.

$(function(){
    $(".input-group input").click(function(){
        $(this).select();
        $(this).parent().find('.btnGravar').removeClass('hidden');
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<table class="table table-striped">
  <tr>
     <td>5103</td>
     <td class="text-center"><i class="fa fa-share-alt-square text-red"></i></td>
     <td>1961-0679x</td>
     <td> Abraçadeira união escape</td>
     <td>Acessórios escapes cross</td>
     <td class="text-center"> 
     <div class="input-group">
        <input class="form-control input-sm text-right" type="text" placeholder="19.99" value="19.99">
        <span class="input-group-addon"><i class="fa fa-eur"></i></span>
        <button class="btn btn-success btn-xs hidden btnGravar">Gravar</button>
     </div>
  </td>
  </tr>
</table>