Hello, I need help to be able to do the following: I need that from a modal with a data table (extracted from my database), they are added to another table, dynamically. This is the layout of my modal, displaying information from my database:
And this is the code with which I show the data: venta_venta.php
<?php
require_once('php/conexion.php');
# code...
// PARA OBTENER LOS DATAS DE LA TABLA CLIENTE ====================
$sql = "SELECT * FROM cliente";
$result = $conn->query($sql);
// PARA OBTENER LOS DATAS DE LA TABLA PRODUCTO====================
$sql2="SELECT * FROM producto";
$result2=$conn->query($sql2);
?>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>Articulo</th>
<th>Unidad M.</th>
<th>Valor</th>
<th>Categoria</th>
<th>P.Unitario</th>
<th>Imagen</th>
<th>Accion</th>
</tr>
</thead>
<tbody>
<?php
if ($result2->num_rows > 0) {
// output data of each row
while($row = $result2->fetch_assoc()) {
echo '<tr><td>'.$row["nombre"].'</td><td>'.$row["unidad_medida"].'</td><td>'.$row["peso"].'</td><td>'.$row["categoria"].'</td><td>'.$row["precio"].'</td><td><img height="100" width="100" src="php/'.$row["imagen"].'" alt="img01" /></td><td><button type="button" class="btn btn-primary" id="idagregar" data-dismiss="modal"><i class="fa fa-plus" ></i> Agregar</button></td></tr>';
}
} else {
echo "0 results";
}
$conn->close();
?>
</tbody>
</table>
I want that from the add button that is generated for each row, I can add the data of that row to this other table:
But that can only be added once per row. In addition to the fact that at the same time I would like an input text to be generated within this table to indicate the quantity of said product and the delete button to get rid of that row. Something like that:
I've been looking everywhere, but I can't find anything related to what I need. I want to avoid using libraries as much as possible, because I'm just starting out with web programming, and I think that using libraries at the level I'm at would be detrimental to my learning. Thanks in advance.
The steps are the following:
parentNode
or viaparent()
if you use jQuery.<input type="number" ... />
for the amount. You add the input to the cell.<button ...>Descartar</button>
to discard that product. You add the button to the cell.<tbody>
the destination table.With jQuery it's even easier:
Instead of using
document.createElement
, you just use the methodappend
and pass the element to add as a string . For example:And to discard a product:
Update price as quantity changes
To update the price as the quantity increases/decreases, it is necessary to place a per-event listener on
change
the quantity input. Also, for convenience, we store the product price in an attributedata-price
each time we add a row to the target table.In the new row we add:
To
<input />
the quantity we add the listener:And the listener for the change event:
Result