take input value Hidden within a <td> tag

Asked

Viewed 838 times

1

how to get value of this input inside the table with data from the 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);

I want to get the ID that is in this input to handle a BD update.

php javascript html jquery mysql

3 answers

3

Simple, just capture the element that was clicked and catch your value using the method 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>

  • This taking the ID of the element, but only returns the one of the first line ... I need each line I receive the corresponding ID !!

  • Of course you’re only taking the first line, you’re just selecting the td.editar1 in the click event.

  • I use to make the event call, even taking only returns me the input value of the first line, the following lines should show their values

  • I edited the answer, now it captures the id as clicked. Take a look to see if it suits you.

  • right, but the ID I want is the input value, see that I get the ID value in php to update the corresponding data.

  • Because you asked your question badly, because you say you need to capture the id and not the value.

  • ta ... it was bad

  • I edited again... Look there.

Show 3 more comments

1


Your code has a problem that many people do: put the same id in more than one element of the page. Although this does not influence the purpose of the question, is wrong practice.

In relation to capturing the value of input, follows the code with the correct selector:

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

  • Perfect friend, regarding the id and name of the input I removed them because I do not need .... obg for the tip and collaboration, stay with God !!

0

Take the value of the input in a table row:

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

Browser other questions tagged php javascript html jquery mysql

You are not signed in. Login or sign up in order to post.