1

Estimados: Como puedo hacer para insertar filas en una tabla html,donde los elementos insertados son inputs del tipo text, y necesito que cada uno tenga un id diferente. Utilizando una de las soluciones planteadas por el usuario Juan Pinzón (desde ya agradecido). LLegué a lo siguiente:

<!-- <!DOCTYPE html>    
<html>
   <head>
       <script src="jquery-3.3.1.min.js"></script>
       <meta charset="utf-8">
   <body>
       <button type="button" id="agregar">Agregar</button>
       <table id="tabla">
           <thead>
               <tr>
                   <th scope="col">Nombre</th>
                   <th scope="col">Apellido</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                   <td>
                   </td>
                   <td>
                   </td>
               </tr>
            </tbody>
        </table>
    </body>
</html>


<script>
$("#agregar").on("click", function(){
    $('#tabla > tbody:last-child').append(                                        '<tr>   <td><input type="text" name="nombre" id="nombre" ></td><td><td><input type="text" name="apellido" id="apellido" ></td><td>');
});
</script> 

Ahora, como hago para que id="nombre", la segunda vez que hago click en "agregar", pase a ser id="nombre2", estimo que debería realizar un ciclo (for o while) en donde incremente esta variable, pero no consigo implementarlo con esta función de jquery, logré hacer algo parecido con php (en otra circunstancia), pero aquí no funciona, ya que cuando desde php debo llamarla con echo, comienza un coque de comillas simples y dobles imposible de resolver. Como se habrán dado cuenta soy bastante novato en el tema. Por lo que, si me mandan a investigar alguna función, librería, etc, está todo mas que bien. Desde ya muchas gracias, y disculpen la extensa consulta. Saludos. PD: si por alguna razón el código no se muestra completo(como me nuestra en el preview), les comento que en el body del html esta creada la tabla como table id="table".

2
  • Tu código tiene un par de problemas aparte. Abres el <body>sin cerrar el <head. Ademas el 'ultimo script esta fuera.
    – JDev
    Commented el 25 oct. 2018 a las 12:17
  • Si, como comentaba arriba, no logre que el editor de está página me reconozca todo el código. (Principiante en SO)
    – FerMV
    Commented el 25 oct. 2018 a las 13:16

2 respuestas 2

0

Con tu código y jquery seria así:

$("#agregar").on("click", function(){

  var numTr = $('#tabla tbody tr').length + 1;

  $('#tabla tbody tr:last')
  .after(`<tr>
             <td>
               <input type="text" name="nombre${numTr}" id="nombre${numTr}" value="nombre${numTr}">
             </td>
             <td>
               <input type="text" name="apellido${numTr}" id="apellido${numTr}" value="apellido${numTr}">
             </td>
           </tr>`);
  
});
<table id="tabla" border="1">
  <thead>
    <tr>
      <th>Nombre</th>
      <th>Apellido</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="nombre1" id="nombre1" value="nombre1">
      </td>
      <td>
        <input type="text" name="apellido1" id="apellido1" value="apellido1">
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2" align="center">
        <button id="agregar">Agregar</button>
      </td>
    </tr>
  </tfoot>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Simplemente cuento cuantas filas hay y le sumo 1, eso es lo que voy a concatenar a los atributos de los campos nombre y apellido e la nueva fila. Espero te sirva.

2
  • pasa lo mismo que en la solucion anterior. Si se implementa borrar y despues de un par de borrados damos a añadir, se cuenta las filas que hay y se produce un id repetido, cosa que no es correcta.
    – Jakala
    Commented el 25 oct. 2018 a las 12:52
  • David, tu código funciona como yo necesito, voy a implementarlo a mi problema en particular (esto que mostré es un ejemplo mucho mas simplificado a fin de realizar la consulta) y te cuento como me fué. Jakala, muchas gracias por tu aporte también, luego discutiremos sobre como quitarlos. Saludos.
    – FerMV
    Commented el 25 oct. 2018 a las 13:18
0

Intenta obteniendo el total de input recreados anteriormente y le concatenas el total al id nuevo:

$("#agregar").on("click", function(){

    // obtenemos el total de los inputs anteriormente creados
    var totalInputs = $('#tabla tr input[type=text]').length;

    $('#tabla > tbody:last-child').append(
    '<tr>   <td><input type="text" name="nombre" id="nombre'+totalInputs+'" ></td><td><td><input type="text" name="apellido" id="apellido" ></td><td>');
});
1
  • aunque en principio parece correcto, si luego se implementa un click de eliminar, puede llegar a repetir ids. Por ej, teniendo nombre1, nombre2, nombre3, si elimina nombre1 y luego pulsa en agregar, aparecera nombre3 repetido. Considero que esta solucion no es del todo correcta.
    – Jakala
    Commented el 25 oct. 2018 a las 12:26

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.