0

hola a todos lo que quiero es lo siguiente tengo una tabla que se llana con registros de la base de datos, por cada registro mostrado tengo un botón el cual tiene un evento onclick que envía los datos a otra pagina. hasta el momento puedo enviar $codArt y $nomArt pero la cantidad txtcantArt no la he podido enviar ya que si hay 4 registros me envia solo el primero y yo quiero que envie solo al que le estoy dando click este es el codigo de la tabla

<table>
       <?php   while ($art=mysqli_fetch_array($resulArtCompra)) {
                      $codArt=$art['prodCodigo'];
                      $nomArt=$art['prodNombre']; ?>
     <tr>
        <td><input type="text" name="txtcodArt" value="<?php echo $codArt?>" ></td>
        <td><input type="text" name="txtnomArt" value="<?php echo $nomArt?>" ></td>
        <td><input type="number" name="txtcantArt" class="txtcantArt" ></td>
        <td><input type="button" name="" value="Agregar" 
                  onclick="agregarArtFactura('<?php echo $codArt?>',
                                             '<?php echo $nomArt?>',
                                             $('.txtcantArt').val())"></td>
   </tr>    
     <?php   }  ?>
</table>



  aqui muestro el evento click

    <script>
         function agregarArtFactura($codArt,$nomArt,txtcantArt){
            alert($codArt + $nomArt + txtcantArt);
         }
   </script>

si en la tabla tengo los siguientes registros la cantidad esta vacía porque la debe llenar el usuario y cuando la llene puede darle a boton agregar para enviar los datos

codigo  nombre  cantidad   opcion
100     arroz              Agregar(este es el boton)
101     jabon              Agregar(este es el boton)
102     aceite             Agregar(este es el boton)

si al primero en la catidad coloca 10 y le da click en Agregar muestre un alert con esos datos ejemplo

100 arroz 10

y si le da click al segundo y en la cantidad coloca 5 muestre y así sucesivamente con todos los registros

101 jabon 5

espero me puedan ayudar

2
  • El input que refieres (<input type="number" name="txtcantArt" class="txtcantArt" >) no tiene una propiedad value, por tanto no podrás encontrar el valor. Si el dato está en el td propiamente, tendrás que buscar el text del mismo.
    – A. Cedano
    Commented el 23 jul. 2020 a las 15:15
  • hola A. Cedeno gracias por responder el valor lo coloca el usuario. como debo buscar el valor text de la fila a la que le hago click? Commented el 23 jul. 2020 a las 15:37

1 respuesta 1

1

Evita el uso de eventos en línea (dentro de la misma etiqueta) para hacer tu código más legible y fácil de mantener. Especifica el atributo name de los botones para poder acceder a ellos desde javascript.

Se obtienen todos los botones por nombre y se asigna el evento onclick, solo con el nombre de la función, que recibirá el evento mismo como parámetro. Se obtiene el botón en que se hizo clic con event.target y sirve como referencia para encontrar fila y campos:

// Obtener botones y asignar evento onclick
$('[name="btnAgregar"]').on('click', agregarArtFactura);

// El parámetro e corresponde al evento lanzado (event)
function agregarArtFactura(e) {
    // Desde el evento se obtiene fila con closest y nombre de etiqueta
    let tr = $(e.target).closest('tr');
    // Desde la fila se busca cada campo con find y atributo name
    let txtcodArt = $(tr).find('[name="txtcodArt"]').val();
    let txtnomArt = $(tr).find('[name="txtnomArt"]').val();
    let txtcantArt = $(tr).find('[name="txtcantArt"]').val();
    console.log(`
        txtcodArt = ${txtcodArt}
        txtnomArt = ${txtnomArt}
        txtcantArt = ${txtcantArt}
    `);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
     <tr>
        <td><input type="text" name="txtcodArt" value="Cod Art 1" ></td>
        <td><input type="text" name="txtnomArt" value="Nom Art 1" ></td>
        <td><input type="number" name="txtcantArt" class="txtcantArt" ></td>
        <td><input type="button" name="btnAgregar" value="Agregar"></td>
   </tr>    
     <tr>
        <td><input type="text" name="txtcodArt" value="Cod Art 2" ></td>
        <td><input type="text" name="txtnomArt" value="Nom Art 2" ></td>
        <td><input type="number" name="txtcantArt" class="txtcantArt" ></td>
        <td><input type="button" name="btnAgregar" value="Agregar"></td>
   </tr>    
     <tr>
        <td><input type="text" name="txtcodArt" value="Cod Art 3" ></td>
        <td><input type="text" name="txtnomArt" value="Nom Art 3" ></td>
        <td><input type="number" name="txtcantArt" class="txtcantArt" ></td>
        <td><input type="button" name="btnAgregar" value="Agregar"></td>
   </tr>    
</table>

Nota: El script debe estar hasta abajo, antes de </body>, o bien, dentro de una función que se ejecute cuando el DOM se haya cargado.

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.