1

como pegar valor deste input dentro da tabela com dados do bd:

HTML CODE

<table id="tbl_3"  class="table table-striped table-bordered table-hover">

<thead>
  <tr>

    <th style='text-align: center;' >NOME</th>
    <th style='text-align: center;' >SETOR</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>

  </tr>
</thead>

<tbody>

<?  

foreach($z as $item){ 


?>

    <tr> 

    <td style='text-align: left; width: 250px'><?=$item['nome']; ?></td>
    <td style='text-align: center; width: 250px''><?=$item['setor']; ?></td>

    <td style='text-align: center; width: 62px' class="editar1" > <?=$item['qtd1']; ?> <input type="text" id="qtd1" name="qtd1" value="<?=$item['id']; ?>" /> </td>

    <td style='text-align: center; width: 62px'><?=$item['valor1']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd2']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor2']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd3']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor3']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd4']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor4']; ?></td>

  </tr>

<?  }  ?>

JS CODE

$('#tbl_3 tbody tr td.editar1').dblclick(function(){

          var idElemento = $('#tbl_3 tbody tr td input').val() ;  console.log(idElemento);

quero pegar o ID que consta neste input para tratar uma atualização no BD.

3 Respostas 3

3

Simples, basta capturar o elemento que foi clicado e pegar o seu value usando o método val():

$('table tbody tr td input').dblclick(function(){
   var id = $(this).val(); //captura o id cdo input clicado
   $('p').html(id);
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<table>
 <tbody>
   <tr> <td> <input id="input1"/>  </td> </tr>
   <tr> <td> <input id="input2"/>  </td> </tr>
   <tr> <td> <input id="input3"/>  </td> </tr>
   <tr> <td> <input id="input4"/>  </td> </tr>
   
 </tbody>

</table>

<p> </p>

8
  • Esta pegando o ID do elemento, mas só retorna o da primeira linha ... necessito que cada linha eu receba o ID correspondente !! Commented 21/02/2018 às 18:41
  • É claro que está pegando apenas o da primeira linha, você só está selecionando o td.editar1 no evento de click. Commented 21/02/2018 às 18:42
  • utilizo para fazer a chamada do evento, mesmo tirando só me retorna o valor do input da primeira linha, as linhas seguintes deveriam mostrar seus valores Commented 21/02/2018 às 18:45
  • Editei a resposta, agora ele captura o id conforme o clicado. Dê uma olhada para ver se lhe serve. Commented 21/02/2018 às 18:47
  • certo, mas o ID que quero é o valor do input, veja que recebo o valor do ID em php para atualizar o dado correspondente. Commented 21/02/2018 às 18:49
1

Seu código tem um problema que muitas pessoas fazem: colocar o mesmo id em mais de um elemento da página. Apesar disso não influenciar no propósito da pergunta, é uma prática errada.

Em relação a capturar o value do input, segue o código com o seletor correto:

$('#tbl_3 tbody tr td.editar1').dblclick(function(){
   var idElemento = $(this).find("input").val() ;  console.log(idElemento);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tbl_3"  class="table table-striped table-bordered table-hover">

<thead>
  <tr>

    <th style='text-align: center;' >NOME</th>
    <th style='text-align: center;' >SETOR</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>
    <th style='text-align: center;' >QTD</th>
    <th style='text-align: center;' >R$</th>

  </tr>
</thead>

<tbody>


    <tr> 

    <td style='text-align: left; width: 250px'><?=$item['nome']; ?></td>
    <td style='text-align: center; width: 250px''><?=$item['setor']; ?></td>

    <td style='text-align: center; width: 62px' class="editar1" > <?=$item['qtd1']; ?> <input type="text" id="qtd1" name="qtd1" value="id1" /> </td>

    <td style='text-align: center; width: 62px'><?=$item['valor1']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd2']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor2']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd3']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor3']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd4']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor4']; ?></td>

  </tr>

    <tr> 

    <td style='text-align: left; width: 250px'><?=$item['nome']; ?></td>
    <td style='text-align: center; width: 250px''><?=$item['setor']; ?></td>

    <td style='text-align: center; width: 62px' class="editar1" > <?=$item['qtd1']; ?> <input type="text" id="qtd1" name="qtd1" value="id2" /> </td>

    <td style='text-align: center; width: 62px'><?=$item['valor1']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd2']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor2']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd3']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor3']; ?></td>
    <td style='text-align: center; width: 62px'  ><?=$item['qtd4']; ?></td>
    <td style='text-align: center; width: 62px'><?=$item['valor4']; ?></td>

  </tr>
  </table>

1
  • Perfeito amigo, em relação ao id e name do input eu retirei eles pois nem preciso .... obg pela dica e pela colaboração, fique com deus !! Commented 21/02/2018 às 18:54
0

Pegar o valor do input em uma linha da tabela:

$(function(){

  $('button').click(function(){

	var valor = $(this).parent().find('.field').val();

	alert(valor );

 });
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
 <thead>
   <th>Valor / Ação</th>
 </thead>
 <tbody>

   <tr> 
     <td> <input class="field" value="10">
          <button>Clique</button>  
     </td> 
   </tr>
   <tr> 
     <td> <input class="field" value="20">
          <button>Clique</button>  
     </td>
   </tr>
   <tr> 
     <td> <input class="field" value="30">
          <button>Clique</button>  
     </td> 
   </tr>
   
 </tbody>

</table>

Valor Ação Clique Clique Clique

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 .