0

Tenho uma tabela em bootstrap e numa das colunas tenho um botão de gravar escondido. Queria ao clicar no input existente, que esse botao aparecesse.

Ja estou farto de tentar fazer diversos metodos de selectores mas ate agora nenhum funcionou.

O que tenho actualmente é assim:

<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>

No Jquery tenho:

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

Mas não mostra o botão que esta hidden.

Aguma ajuda?

2 Respostas 2

1

Você pode usar as funções "focusin" e "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>

0

Eu costumo ir para o parent() e depois dar um find() no elemento que precisa.

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .