0

Estoy tratando de recoger unos datos en una tabla dinámica al hacer click en su correspondiente botón por medio de JQuery. Este es el código del HTML:

<table>
    <thead>
    <th>Título</th>
    <th>Autor</th>
    <th>Fecha creación</th>
    <th>Género Literario</th>
    <th>Género Artístico</th>
    <th>Cantidad</th>
    <th>Precio</th>
    <th>Opciones</th>
    </thead>
    {{$i=0}}
    @foreach($libros as $lib)
        <tr id="fila1{{$i}}">
            <td><input type="hidden" value="{{$lib->lib_titulo}}" name="lped_lib_titulo" class="lped_lib_titulo">{{$lib->lib_titulo}}</td>
            <td>{{$lib->autor}}</td>
            <td>{{$lib->lib_fecha_creacion}}</td>
            <td>{{$lib->generoliterario}}</td>
            <td>{{$lib->generoartistico}}</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="{{$lib->lib_precio}}"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="{{$lib->id_libro}}" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver({{$lib->id_libro}})" >Añadir</button>
            </td>
        </tr>
        {{$i++}}
    @endforeach

Y este el código que yo he generado por medio de JQuery que me funcionaría si fueran id pero como referencio a los campos por medio de class en vez de id al ser dinámico no me funciona...

<script>
        $(document).ready(function(){
            $('.btn_add').click(function(){

                agregar();
            })
        });
function agregar()
        {
            idlibro=$(".lped_libro_id").val();
            libro=$(".lped_lib_titulo").val();
            cantidad=$(".lped_unidades").val();
            pvp=$(".lped_pvp").val();


            if(idlibro!="" && cantidad!="" && cantidad>0 && libro!="")
            {
                subtotal[i]=(cantidad*pvp*0.18);
                total=total+subtotal[i];

                var fila='<tr class="selected" id="fila' + i+ '">' +
                    '<td><button type="button" class="btn btn-warning" onclick="eliminar('+i+');">X</button></td>' +
                    '<td><input type="hidden" name="ped_no[]" value="'+ no +'">'+ no + '</td>'+
                    '<td><input type="hidden" name="idlibro[]" value="'+ idlibro +'">'+ libro + '</td>'+
                        '<input type="hidden" name="libro[]" value="'+libro+ '">'+
                    '<td><input type="number" name="cantidad[]" value="'+ cantidad +'">'+ cantidad + '</td>'+
                    '<td><input type="number" name="pvp[]" value="'+ pvp +'">'+ pvp + '</td>'+
                    '<td><input type="number" name="iva[]" value="'+ 0.18 +'">'+ 18% + '</td>'+
                    '<td>' + subtotal[i] + '</td>'+
                    '</tr>';
                no++;

                limpiar();
                $("#total").html(total + " €");
                evaluar();
                $("#detalles").append(fila);
            }
            else
            {
                alert("Error al ingresar detalle de ingreso");
            }
        } el código aquí

¿Podría alguien decirme cual es el código jquery para coger los datos de los input de la tr seleccionada?

Este es el código que se genera:

<table>
    <thead>
    <th>Título</th>
    <th>Autor</th>
    <th>Fecha creación</th>
    <th>Género Literario</th>
    <th>Género Artístico</th>
    <th>Cantidad</th>
    <th>Precio</th>
    <th>Opciones</th>
    </thead>
                <tr id="5">
            <td><input type="hidden" value="El señor de los anillos" name="lped_lib_titulo" class="lped_lib_titulo">El señor de los anillos</td>
            <td>valleinclán</td>
            <td>2018-01-29</td>
            <td>Impresionismo</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="12.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="5" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(5)" >Añadir</button>
            </td>
        </tr>
                <tr id="3">
            <td><input type="hidden" value="El principito" name="lped_lib_titulo" class="lped_lib_titulo">El principito</td>
            <td>valleinclán</td>
            <td>2018-01-29</td>
            <td>Impresionismo</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="10.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="3" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(3)" >Añadir</button>
            </td>
        </tr>
                <tr id="2">
            <td><input type="hidden" value="Persiles y segismunda" name="lped_lib_titulo" class="lped_lib_titulo">Persiles y segismunda</td>
            <td>valleinclán</td>
            <td>2018-01-26</td>
            <td>Esperpento</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="5.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="2" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(2)" >Añadir</button>
            </td>
        </tr>
                <tr id="1">
            <td><input type="hidden" value="luces de bohemia" name="lped_lib_titulo" class="lped_lib_titulo">luces de bohemia</td>
            <td>valleinclán</td>
            <td>1924-07-26</td>
            <td>Esperpento</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="10.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="1" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(1)" >Añadir</button>
            </td>
        </tr>
        </table>
4
  • Hola María. Puedes poner también el HTML generado en la web? Asi podemos ver como queda tras la generación dinámica y poder trastear con jQuery. Mira Cómo preguntar y ejemplo mínimo verificable para mejorar la pregunta. Un saludo
    – lois6b
    el 8 feb. 2018 a las 9:43
  • 1
    Claro, faltaría más, lo acabo de añadir. Un saludo! el 8 feb. 2018 a las 9:45
  • Veo que en el HTML generado te sobran dos }} tras la propiedad value. Respecto a tu pregunta, ¿quieres que al hacer click en el boton recoja los datos de la fila seleccionada? ¿Has probado a añadir una clase selected cuando hagas click en ella y asi detectar cual es desde jQuery?
    – lois6b
    el 8 feb. 2018 a las 9:53
  • Exáctamente, quiero que recoja los datos de los input de la fila seleccionada. ¿Con selected te refieres a esta línea? $(this).addClass('selected'); La he probado pero no hace nada... el 8 feb. 2018 a las 10:16

1 respuesta 1

1

Realmente es muy sencillo, ya que cada tr tiene un id. Lo que tienes que pedir a jquery es el valor del input con el name dado que esté en un td que sea hijo de del elemento con el id dado. Eso, traducido a CSS query es lo siguiente:

'#id_de_la_fila > td > input[name=nombre_del_input]'

function valor(idTr,inputName) {
  return $('#'+idTr+' > td > input[name='+inputName+']').val();
}

Aquí lo tienes funcionando con tu tabla:

function valor(idTr,inputName) {
      return $('#'+idTr+' > td > input[name='+inputName+']').val();
}


$('tr').on('click',function () {
  let id=$(this).attr('id');
  console.log('Libro seleccionado:', valor(id,'lped_lib_titulo'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
    <th>Título</th>
    <th>Autor</th>
    <th>Fecha creación</th>
    <th>Género Literario</th>
    <th>Género Artístico</th>
    <th>Cantidad</th>
    <th>Precio</th>
    <th>Opciones</th>
    </thead>
                <tr id="5">
            <td><input type="hidden" value="El señor de los anillos" name="lped_lib_titulo" class="lped_lib_titulo">El señor de los anillos</td>
            <td>valleinclán</td>
            <td>2018-01-29</td>
            <td>Impresionismo</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="12.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="5" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(5)" >Añadir</button>
            </td>
        </tr>
                <tr id="3">
            <td><input type="hidden" value="El principito" name="lped_lib_titulo" class="lped_lib_titulo">El principito</td>
            <td>valleinclán</td>
            <td>2018-01-29</td>
            <td>Impresionismo</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="10.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="3" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(3)" >Añadir</button>
            </td>
        </tr>
                <tr id="2">
            <td><input type="hidden" value="Persiles y segismunda" name="lped_lib_titulo" class="lped_lib_titulo">Persiles y segismunda</td>
            <td>valleinclán</td>
            <td>2018-01-26</td>
            <td>Esperpento</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="5.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="2" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(2)" >Añadir</button>
            </td>
        </tr>
                <tr id="1">
            <td><input type="hidden" value="luces de bohemia" name="lped_lib_titulo" class="lped_lib_titulo">luces de bohemia</td>
            <td>valleinclán</td>
            <td>1924-07-26</td>
            <td>Esperpento</td>
            <td>Renacimiento</td>
            <td ><input type="number" name="lped_unidades" class="lped_unidades"></td>
            <td><input type="number" value="10.00"}} disabled name="lped_pvp" class="lped_pvp">
            <input type="hidden" value="1" name="lped_libro_id" class="lped_libro_id"></td>
            <td>
                <button class="btn_add" onclick="ver(1)" >Añadir</button>
            </td>
        </tr>
        </table>

0

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.