0

Tengo el siguiente código donde obtengo los datos de una fila mediante un evento de un botón.

$('#tbl').on('click', 'button.replay', function(e) {

    var cliente = $(this).closest('tr').find('td:eq(0)').text();
    var cantidad = $(this).closest('tr').find('td:eq(1)').text();
    var id = $(this).closest('tr').find('input[name=id]').val();
    
    console.log('Cliente ' +cliente+' id '+id);
        
  });
     

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

     <div class="table-responsive text-nowrap">
          <table class="table table-bordered table-hover" id="tbl">
            <thead>
              <tr>
                <th>Cliente</th>
                <th>Cantidad</th>
                <th>Comentario</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="tbody_folio">
                <tr>
                <td>CL 1</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
                <button class='btn btn-sm btn-warning replay' type='button' name='button'>
                <input type="hidden" name="id" value="1">
                <i class='fas fa-chevron-circle-right'></i>agregar a pedido</button>
                </td>
              </tr>
               <tr>
                <td>CL 2</td>
                <td>100</td>
                <td>Pedido urgente</td>
                <td>
                <button class='btn btn-sm btn-warning replay' type='button' name='button'>
                 <input type="hidden" name="id" value="2">
                <i class='fas fa-chevron-circle-right'></i> agregar a pedido</button>
                </td>
              </tr>
            </tbody>
          </table>
          </div>

Me gustaría hacer lo mismo pero al hacer click del mouse en la tabla $('#tbl').click( function(event) . He buscado ejemplos pero no he podido rescatar el input hidden. Espero haberme explicado bien.

9
  • Hola, amigo, yo no entendí muy bien el problema que tienes. ¿Qué de qué quieres rescatar al darle click al elemento "#tbl"? Además veo que este id se lo asignas a la tabla, entonces solo va a funcionar cuando le hagas click a la tabla, ¿este comportamiennto está bien? Espero me expliques para ayudarte Commented el 16 ene. 2020 a las 13:27
  • @FernandoTorres sii, haciendo click sobre la tabla
    – MoteCL
    Commented el 16 ene. 2020 a las 13:37
  • Para traer el input hidden que tiene el nombre id puedes usar directamente esto: $('input[name=id]').val() Commented el 16 ene. 2020 a las 13:38
  • @JuniorUsca para usarlo despues en un ajax y obtener la info cliente.
    – MoteCL
    Commented el 16 ene. 2020 a las 13:40
  • 1
    Es que lo que quieres no tiene sentido con lo que tienes en la tabla, yo creo que está mal planteado todo, porque sabes algo? Si tienes muchos input hidden y quieres disparar un evento al darle click a la tabla, cuándo sabrías qué input hidden tomar de tantos que tienes? Más bien yo creo que te refieres a que mejor el evento onclick se dispare al darle click en cualquier fila de tu tabla, no? Así al darle click a cualquier fila de tu tabla ya sabrías qué input tomar Commented el 16 ene. 2020 a las 13:46

1 respuesta 1

-3

Aqui encontre la solucion.

   $('#tbl tbody').on('click', 'tr', function(){

    var cliente = $(this).closest('tr').find('td:eq(0)').text();
    var cantidad = $(this).closest('tr').find('td:eq(1)').text();
    var id = $(this).closest('tr').find('input[name=id]').val();
    
    console.log('Cliente ' +cliente+' id '+id);
        
  });
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

     <div class="table-responsive text-nowrap">
          <table class="table table-bordered table-hover" id="tbl">
            <thead>
              <tr>
                <th>Cliente</th>
                <th>Cantidad</th>
                <th>Comentario</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="tbody_folio">
                <tr>
                <td>CL 1</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="1">
                
                </td>
              </tr>
               <tr>
                <td>CL 2</td>
                <td>100</td>
                <td>Pedido urgente</td>
                <td>
               
                 <input type="hidden" name="id" value="33">
             
                </td>
              </tr>
<tr>
                <td>CL 1</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="11">
                
                </td>
              </tr>
<tr>
                <td>CL 4</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="21">
                
                </td>
              </tr>
<tr>
                <td>CL 5</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="14">
                
                </td>
              </tr>
<tr>
                <td>CL 6</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="71">
                
                </td>
              </tr>
<tr>
                <td>CL 7</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="14">
                
                </td>
              </tr>
<tr>
                <td>CL 8</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="15">
                
                </td>
              </tr>
<tr>
                <td>CL 9</td>
                <td>10</td>
                <td>Pedido 1</td>
                <td>
              
                <input type="hidden" name="id" value="99">
                
                </td>
              </tr>
            </tbody>
          </table>
          </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.