0

estoy clonando filas de una tabla en base a una una fila ya impresa con html, el script me clona todo correcto, sin embargo, los names de los input me los pone todos iguales, eso no representa un problema a excepcion de un input file, que al tener el mismo name en todas las filas clonadas no me permite subir una imagem individual por cada registro. Desearia solo cambiar el id de ese input file y el label asociado, vi un ejemplo de como hacerlo pero en dicho ejemplo unicamente se clonaba un div y en mi caso yo clono un tr con 23 td donde cada uno tiene su propio input.

function

<script>

        $(function () {
            // Clona la fila oculta que tiene los campos base, y la agrega al final de la tabla
            $("#adicional").on('click', function () {
                $("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija').appendTo("#tabla");
            });

            // Evento que selecciona la fila y la elimina
            $(document).on("click", ".eliminar", function () {
                var parent = $(this).parents().get(0);
                $(parent).remove();
            });
        });
    </script>

el form que contiene la tabla sobre la cual clono el tr


<form method="post" enctype="multipart/form-data">

            <table class="table_crud" id="tabla">
                <tr class="fila-fija">
                    <!-- <td><input required name="idalumno[]" placeholder="ID Alumno"/></td>
                        <td><input required name="nombre[]" placeholder="Nombre Alumno"/></td>
                        <td><input required name="carrera[]" placeholder="Carrera"/></td>
                        <td><input required name="grupo[]" placeholder="Grupo"/></td> -->

                    <td> <input type='text' size='15' name='rfc[]' placeholder="RFC"></td>
                    <td> <input type='text' size='24' name='curp[]' placeholder="CURP"> </td>
                    <td> <input type='text' size='11' name='nss[]' placeholder="NSS"></td>
                    <td> <input type='text' size='12' name='nombre[]' placeholder="Nombre"> </td>
                    <td> <input type='text' size='12' name='ap[]' placeholder="Apellido P"></td>
                    <td> <input type='text' size='12' name='am[]' placeholder="Apellido M"></td>
                    <td><select name='gen[]'>
                            <option disabled selected> &nbsp; G&nbsp;&nbsp;&nbsp;</option>
                            <option value='F'>F</option>
                            <option value='M'>M</option>
                        </select>
                    </td>
                    <td> <input type='date' style='width: 100px' name='fn[]'></td>
                    <td><select name='ec[]'>
                            <option disabled selected>E.C</option>
                            <option value="Soltero">Soltero</option>
                            <option value="Casado">Casado</option>
                            <option value="Divorciado">Divorciado</option>
                            <option value="Viudo">Viudo</option>
                        </select>
                    </td>

                    <td> <input type='text' name='calle[]' placeholder="Calle"></td>
                    <td> <input type='text' name='ne[]' placeholder="Número exterior"></td>
                    <td> <input type='text' name='cp[]' placeholder="Código postal"></td>
                    <td> <input type='text' name='colonia[]' placeholder="Colonia"></td>
                    <td> <input type='text' name='municipio[]' placeholder="Municipio"></td>
                    <td> <input type='text' name='tel[]' placeholder="Teléfono"></td>
                    <td> <input type='email' name='correo[]' placeholder="Correo"></td>
                    <td><select name='sucursal[]'>" ?>
                            <option disabled selected>Sucursal</option>
                            <option>Miniso Altacia León</option>
                            <option>Miniso Vía Alta Salamanca</option>
                            <option>Miniso Alaia Guanajuato</option>
                            <option>Miniso León Centro</option>
                            <option>Miniso Plaza Mayor</option>
                            <option>Miniso La Luciernaga</option>
                            <option>Miniso Parque Celaya</option>
                            <option>Miniso Galerías Celaya</option>
                            <option>Miniso Centro Max</option>
                            <option>Miniso Cibeles Irapuato</option>
                        </select></td>


                    <td> <select name='cargo[]'>
                            <option disabled selected>Cargo</option>
                            <option>Gerente</option>
                            <option>Subgerente</option>
                            <option>Analista de soporte técnico</option>
                            <option>Promotor de ventas</option>
                            <option>Monitorista</option>
                            <option>Auxiliar de salud y belleza</option>
                            <option>Auxiliar de inventarios</option>
                            <option>Auxiliar de tiendas</option>
                            <option>Cajero</option>
                        </select></td>


                    <td> <input type='date' name='incon[]'></td>
                    <td> <input type='time' name='he[]'></td>
                    <td> <input type='time' name='hs[]'></td>
                    <td> <input type='text' size='7' name='sueldo[]' placeholder="Sueldo"></td>

                    <td> <img src='./img/curriculum/emple.png' class='fotos_crud_exis' width='100px' id='foto'
                            name='foto'>
                    </td>
                    <td> <label for='fotos' class='btn_photo'><i class='fa-solid fa-image-portrait'></i>&nbsp;<i
                                class='fa-solid fa-arrow-up-from-bracket'></i></label>
                        <input type='file' name='fotos[]' id='fotos' class='filecrud' onchange='mostrarimagen(this)'>

                    </td>
                    <td class="eliminar"><input type="button"  value="Menos -" /></td>
                </tr>
            </table>
            <div class="btn-der">
                <input type="submit" name="insertar" value="Insertar empleado" class="daralta" />
                <button id="adicional" name="adicional" type="button" class="daralta"> Más + </button>


            </div>
        </form>

input sobre el cual deseo poder cambiar el name, ejemplo, a fotosq, fotos2, fotos3, dependiendo de cuantas filas se inserten mediante el boton "mas"

<label for='fotos' class='btn_photo'><i class='fa-solid fa-image-portrait'></i>&nbsp;<i
                                class='fa-solid fa-arrow-up-from-bracket'></i></label>
                        <input type='file' name='fotos[]' id='fotos' class='filecrud' onchange='mostrarimagen(this)'>

esto es lo que quiero explicar

esto es lo que trato de explicar, no se que estoy haciendo mal :(

2
  • Las id cumplen algún propósito?? porque si no haces nada con ellas, lo mejor es quitarlas de la fila cero. Luego los names los tienes como array eso ya te permite duplicar los names ¿por que quieres cambiarlo?
    – Yussef
    Commented el 22 oct. a las 1:12
  • el id me ayuda a previsualizar la imagen cuando la cargo con el input file (mediante la funcion mostrarimagen()), sin embargo, al tener todos los files el mismo id solo me previsualiza una unica imagen. Lo del name fue una equivocacion, me referia al id, ya lo edito
    – Ji Mena
    Commented el 22 oct. a las 1:24

1 respuesta 1

1

Te explico con comentarios en el código:

$("#adicional").on('click', function () {
    //esto lo separamos
    //$("#tabla tbody tr:eq(0)").clone().removeClass('fila-fija').appendTo("#tabla");

    let nuevaFila = $("#tabla tbody tr:eq(0)").clone();

    //bucamos cuantas filas hay y le sumamos 1
    let nuevaID= $("#tabla tbody tr").length + 1;

    //buscamos el elemento fotos
    let foto = nuevaFila.find("#fotos");

    //cambiamos la id
    foto.prop("id", "fotos" +  nuevaID);

    //agregamos la fila
    nuevaFila.removeClass('fila-fija').appendTo("#tabla")
     
});
4
  • hice unas adaptaciones e iba bien pero en cierto punto todo colapso, a la tercera fila que insertaba me marcaba este error crudempleados.php:40 Uncaught TypeError: Cannot read properties of null (reading 'setAttribute') at HTMLButtonElement.<anonymous> (crudempleados.php:40:10) at HTMLButtonElement.dispatch (jquery-3.7.1.js:5145:27) at HTMLButtonElement.<anonymous> (jquery-3.7.1.js:4949:28) y por ejemplo la segunda fila es el id fotos2 y foto2 en el file e img, sin embargo se va recorriendo, siendo la fila la que toma esos id cuando inserto 3 filas. Espero explicarme
    – Ji Mena
    Commented el 22 oct. a las 2:40
  • ` $("#adicional").on('click', function () { let nuevaFila = $("#tabla tbody tr:eq(0)").clone(); let nuevaID= $("#tabla tbody tr").length + 1; var file = document.getElementById('fotos'); var img = document.getElementById('foto'); file.setAttribute('id', 'fotos'+ nuevaID); img.setAttribute('id', 'foto'+ nuevaID) console.log(file); console.log(img); nuevaFila.removeClass('fila-fija').appendTo("#tabla")`
    – Ji Mena
    Commented el 22 oct. a las 2:41
  • es como si se fuera recorriendo la primera fila hacia abajo, adjuntare la imagen como respuesta a la pregunta
    – Ji Mena
    Commented el 22 oct. a las 2:44
  • @JiMena mil disculpas, me confundí le estaba agregando el id a la fila, cuando había que agregar el id al input. He editado el código espero que ahora resulte. Recuerda además borrar la "respuesta" que has agregado ya que no es una respuesta. Cualquier información adicional debes editar tu pregunta y agregarla ahí
    – Yussef
    Commented el 22 oct. a las 3:50

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.