Jquery Table Selector with bootstrap

Question

Jquery Table Selector with bootstrap

Navigation

#1 by (0 votes)

0

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

I'm tired of trying to do several selector methods but so far none has worked.

What I have today 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 is hidden.

Does it help?

jquery selecteditem bootstrap-table

asked by anonymous 07.03.2017 / 14:13

1 answer

Recover data from the localStorage in its given input! Problems with angular and http-server routes

score 0 · Answer 1

I usually go to parent() and then give find() to the element you need.

$(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><linkhref="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>