I have the following table of articles which I want to add to another table that works as a 'cart':
<table id="articulo">
<thead class="bg-primary text-white">
<tr>
<th scope="col" width='60px'>Código</th>
<th scope="col">Imagen</th>
<th scope="col">Nombre</th>
<th scope="col">Categoría</th>
<th scope="col">Almacén</th>
<th scope="col">Cantidad</th>
<th scope="col">Precio</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
@foreach ($articulos as $articulo)
<tr>
<td>{{ $articulo->codigo }}</td>
@if (isset($articulo->imagen))
<td class="text-center">
<img src="/imagen/{{$articulo->imagen}}" style="height: 50px; width: 50px; border-radius: 20%;">
</td>
@else
<td class="text-center"><img src="/imagen/caja.png"
alt="" width="70" height="70"></td>
@endif
<td>{{ Str::ucfirst($articulo->nombre) }}
</td>
<td>{{ Str::ucfirst($articulo->categoria->nombre) }}</td>
<td>
<select class="form-control" name="almacen" id="almacen">
@foreach ($detallearticulos as $detallearticulo)
@if ($detallearticulo->articulo_id == $articulo->id)
<option value="{{ $detallearticulo->almacen_id }}">{{ $detallearticulo->almacen->nom_alm }}</option>
@endif
@endforeach
</select>
</td>
<td>
<input type="number" class="form-control" min="0" max="100" name="cantidad" id="cantidad" step="1"
oninput="validity.valid||(value='')">
</td>
<td>
<input type="number" class="form-control" min="0" max="10000" name="precio_compra" id="precio_compra"
placeholder="0.00" step="0.25" >
</td>
<td class="text-right" style="width: 220px;">
<input type="hidden" name="articulo_id" id="articulo_id" value="{{$articulo->id}}">
<input type="hidden" name="articulo_nombre" id="articulo_nombre" value="{{$articulo->nombre}}">
<div class="form-group">
<button type="button" id="agregar" class="btn btn-info float-right mt-1"> <i class="fas fa-check"></i>
Agregar</button>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
What I need is that from a modal with a table the articles are added to another table dynamically, but in my case the add button only works for the first row, and in the rest of the rows it does not perform any action, What I can do? I don't know if the error is inside the table or in the add function.
My add function is as follows:
function agregar() {
articulo_id = $("#articulo_id").val();
articulo = $("#articulo_nombre").val();
cantidad = $("#cantidad").val();
precio_compra = $("#precio_compra").val();
if (articulo_id != "" && cantidad != "" && cantidad > 0 && precio_compra != "" && articulo_id != null) {
if (precio_compra <= 10000) {
subtotal[cont] = cantidad * precio_compra;
total = total + subtotal[cont];
var fila = '<tr class="selected" id="fila' + cont +
'"><td><button type="button" class="btn btn-danger btn-sm" onclick="eliminar(' + cont +
');"><i class="fas fa-trash-alt"></i></button></td><td><input type="hidden" name="articulo_id[]" value="' +
articulo_id + '">' + articulo +
'</td> <td> <input type="hidden" id="precio_compra[]" name="precio_compra[]" value="' +
precio_compra + '"> <input class="form-control" type="number" id="precio_compra[]" value="' +
precio_compra +
'" disabled> </td> <td> <input type="hidden" name="cantidad[]" value="' + cantidad +
'"> <input class="form-control" type="number" value="' + cantidad +
'" disabled> </td> <td align="right">Bs ' + parseFloat(subtotal[cont]).toFixed(2) + ' </td></tr>';
cont++;
limpiar();
totales();
evaluar();
$('#detalles').append(fila);
}
If you could help me I would appreciate it very much.
I see two problems
The first is that those
id
of the html are designed to identify a single element of the dom, as here you are doing a@foreach
, for each<tr>
you draw in the table you repeat the identifiersI advise you to change the
id
egclass
by
That's why when you do
precio_compra = $("#precio_compra").val();
in the functionagregar
always take the one from the first<tr>
of the tableThe next thing is that when you click the "Add" button, you limit the search of the values to only the row in which the button you pressed is, that you prevent jquery from searching the entire dom, well...
Change the
id
by class in the buttona
And then in your javascript listen when the class is clicked
.js-agregar
and have the function called insideagregar
In the on click that we have just done we are obtaining the element clicked with
$(this)
, that is, the button, and starting from the button we look for the row to which it belongs with.closest()
Since we already have the row, we can now obtain the values of that specific row using
.find()
, you would have to modify the functionagregar
to receive the parameterfila
Closest finds parent elements of the selected element, and find finds child elements .
I hope my explanation helps you!
this is because you only select the first element.
you have several ways to do it 1 would be using in event.target
or giving each one the onclick property
now with onclick:
some libraries will add an id to tr and instead of referencing this and escalate doom
they pass the same id of the database to have an exact reference, one will be the id of your database so it will not be repeated