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".
<body>
sin cerrar el<head
. Ademas el 'ultimo script esta fuera.