0

tengo la siguiente tabla de artículos la cual quiero agregar a otra tabla que funcione como un 'carrito':

introducir la descripción de la imagen aquí

<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>

Lo que necesito es que desde un modal con una tabla los artículos se agreguen a otra tabla de forma dinámica, pero en mi caso el botón de agregar solo funciona para la primera fila, y en el resto de las filas no me realiza ninguna acción, ¿qué puedo hacer? No sé si el error está dentro de la tabla o en la función de agregar.

Mi función de agregar es la siguiente:

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);
            }

Si pudieran ayudarme lo agradecería mucho.

2 respuestas 2

1

Veo dos problemas

El primero es que los id del html están pensados para identificar un único elemento del dom, como acá estás haciendo un @foreach, por cada <tr> que dibujas en la tabla repites los identificadores

Te aconsejo que cambies los id por class ej

<input type="number" class="form-control" name="precio_compra" id="precio_compra">

por

<input type="number" class="form-control js-precio-compra" name="precio_compra">

Por eso cuando haces precio_compra = $("#precio_compra").val(); en la función de agregar siempre toma el del primer <tr> de la tabla

Lo siguiente es que al clickear el botón "Agregar", limites la búsqueda de los valores a solo la fila en la que está el botón que presionaste, que impidas que jquery busque en todo el dom pues...

Cambia el id por clase en el botón de

<button type="button" id="agregar" class="btn btn-info float-right mt-1">Agregar</button>

a

<button type="button" class="btn btn-info float-right mt-1 js-agregar">Agregar</button>

Y luego en tu javascript escucha cuando se clickee la clase .js-agregar y haz que se llame dentro la función agregar

$(".js-agregar").on("click", function(){
    fila = $(this).closest("tr");
    agregar(fila);
});

En el on click que acabamos de hacer estamos obteniendo el elemento clickeado con $(this), osea el botón, y partiendo del botón buscamos la fila a la que pertenece con .closest()

Como ya tenemos la fila, podemos obtener ahora los valores de esa fila específica usando .find(), ocuparías modificar la función agregar para recibir el parametro fila

function agregar(fila) {
    articulo_id = fila.find(".js-articulo-id").val();
    articulo = fila.find(".js-articulo-nombre").val();
    cantidad = fila.find(".js-cantidad").val();
    precio_compra = fila.find(".js-precio-compra").val();

Closest busca elementos padre del elemento seleccionado, y find busca elementos hijos

Espero te sea de ayuda mi explicación!

0

esto se da porque solo seleccionas el primer elemento.

tienes varias formas para hacerlo 1 seria usando en event.target

o dandole a cada uno la propiedad onclick

document.querySelector("tbody").addEventListener("click",(e)=>{
// hacemos referencia al elemento seleccionado
self = e.target;
// validamos que sea un button
if(self.nodeName != "BUTTON") return

// buscamos al padre tr
// tambien puedes usar parentNode etc..
tr = self.closest("tr");
// ahora solo es apartir del tr
// buscar los elementos.
for (x of tr.querySelectorAll("td")){
  console.log(x)
}
})
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
<table>
 <thead>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
    <th>Action</th>
  </tr>
   </thead>
   <tbody>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
    <td><button>agregar</button></td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
    <td><button>agregar</button></td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
    <td><button>agregar</button></td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
    <td><button>agregar</button></td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
    <td><button>agregar</button></td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
    <td><button>agregar</button></td>
  </tr>
  </tbody>
</table>

ahora con onclick:

function agregar(e){
  tr = e.closest("tr")
  for (x of tr.querySelectorAll("td")){
  console.log(x)
}
}
  table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 100%;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }

    tr:nth-child(even) {
      background-color: #dddddd;
    }
 <table>
     <thead>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</th>
        <th>Action</th>
      </tr>
       </thead>
       <tbody>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
        <td><button onclick="agregar(this)">agregar</button></td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
        <td><button onclick="agregar(this)">agregar</button></td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
        <td><button onclick="agregar(this)">agregar</button></td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
        <td><button onclick="agregar(this)">agregar</button></td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
        <td><button onclick="agregar(this)">agregar</button></td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
        <td><button onclick="agregar(this)">agregar</button></td>
      </tr>
      </tbody>
    </table>

algunas librerias le agregar un id al tr y en ves de hacer referencia a this y escalar el doom

pasan el mismo id de la base de datos para tener una referencia exacta el uno va ser el id de tu base de datos por lo que no se repetira

<tr id="tr-1">
<td><button onclick="agregar('tr-1')">agregar</button></td>
function agregar(id){
 tr = document.getElementById(id);
}

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.