Untitled

<html>
     <?php
     include ("conexion.php");
     $productos= "SELECT codigo,descripcion, precioventa,existencia, imagen FROM productos";
     ?>
<head>
<title>Formulario</title> .
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <form method="post" id="myForm">
<table  class="default" border="1">
    <caption>Productos a la Venta</caption>
    <tr>
    <th> Código</th>
    <th> Descripción</th>
    <th> Imagen</th>
    <th> Existencia</th>
    <th> Precio Unitario</th>
    <th> Ingrese Cantidad</th>
    <th> Subtotal</th>
    </tr>

    <?php
       $resultado =mysqli_query($conexion, $productos);
       while($row=mysqli_fetch_array($resultado)){
        ?>

       <tr>
        <td> <?php echo $row["codigo"];?></td>
        <td> <?php echo $row["descripcion"];?></td>
        <td> <img width="100" src= "imagenes/<?php echo $row['imagen'];?>"></td>
        <td> <?php echo $row["existencia"];?></td>
        <td> <input id= "precio" value="<?php echo $row["precioventa"];?>" disabled> </td>
        <td><input type="number" id="cantidad" min="0" max="<?php echo $row["existencia"];?>" size="1"  > <input type="submit" value="Agregar" id="boton"></td>
       <td id="resultado" >

</td>
       <?php }mysqli_free_result($resultado);?>
         </tr>

      </table>


    <script >

         $(document).ready(function() {
  $('#myForm').on('submit', function(e) {
    e.preventDefault();
    var btn = $(this).find("input[type=submit]:focus");
    var precio = btn.closest('td').prev('td').find('input').val();
    var cantidad = btn.closest('td').find('input').first().val();
    btn.closest('td').next('td').html("$" + (parseFloat(precio) * parseFloat(cantidad)))
  });
});

           </script>

      </form>


     <caption>Detalle de orden de compra</caption>


</body>
</html>