¡Hola! Recien empiezo con jQuery y la verdad estoy muy verde esto. Me gustaría saber si alguien podría ayudarme o al menos darme una idea de lo que tendría que hacer ya que no he encontrado solución y ya he buscado pero no logro dar con lo que quiero realmente.

Este es mi código HTML.

<div class="row">
                    <div class="panel panel-default">
                         <div class="panel-heading">
                              <h3 class="panel-title">Unidades de competencia</h3>
                         </div>
                         <div class="panel-body">
                              <form action="" role="form">
                                   <div class="col-md-9 col-xs-12">
                                        <div class="form-group">
                                             <label for="unidad">Unidad</label>
                                             <input type="text" class="form-control" id="unidadCompetencia"> 
                                        </div>
                                   </div>

                                   <div class="col-md-1 col-xs-6">
                                        <div class="form-group">
                                             <label for="tiempoUnidad">Tiempo</label>
                                             <input type="text" class="form-control" id="tiempoCompetencia">
                                        </div>
                                   </div>

                                   <div class="col-md-2 col-xs-6">
                                        <div class="form-group">
                                             <label for="">&nbsp;</label>
                                             <input type="button" class="btn btn-default form-control" value="Agregar" id="agregarCompetencia">
                                        </div>
                                   </div>

                                   <div class="col-md-12">
                                        <table class="table table-hover table-bordered text-center" id="tablaCompetencia">
                                             <thead>
                                                  <tr class="active">
                                                       <th>Unidad</th>
                                                       <th>Tiempo</th>
                                                       <th>&nbsp;</th>
                                                  </tr>
                                             </thead>
                                             <tbody>
                                                  <tr class="ocultarCompetencia">
                                                       <td id="insertarUnidadCompetencia"></td>
                                                       <td id="insertarTiempoCompetencia"></td>
                                                       <td><input type="button" class="btn btn-xs btn-danger" value="Eliminar"></td>
                                                  </tr>
                                             </tbody>
                                        </table>
                                   </div>
                              </form>
                         </div>
                    </div>
               </div>

Mi código jQuery
$$CODE1$$

La previsualización es esta:

http://i.imgur.com/AkyLwdf.jpg


Puedo añadirlo solo una vez a la tabla pero lo que deseo es poder añadir más veces (ilimitadas por el usuario) más unidades a la tabla y no logro dar con el como. ¿Podrían ayudarme?

Hola Hoose, qué de tiempo, mira, he estado indagando y la mejor manera que se te adapta sería hacer un append(), por lo cual quitamos el contenido de "tbody" para así añadirlo recursivamente con una cadena, por lo cual quedaría así el jQuery:

$(document).ready(function(){
	$('#agregarCompetencia').click(function(){
		cadena = "<tr>";
		cadena = cadena + "<td>" + $('#unidadCompetencia').val() + "</td>";
		cadena = cadena + "<td>" + $('#tiempoCompetencia').val() + "</td>";
		cadena = cadena + '<td><input type="button" class="btn btn-xs btn-danger" value="Eliminar"></td>';
		cadena = cadena + "</tr>";

		$("#tablaCompetencia tbody").append(cadena);

		$('#unidadCompetencia').val("");
		$('#tiempoCompetencia').val("");
	});
});

Espero y te ayude

---

I am the bone of my sword.

Muchas gracias, Sater. Si me funciono. Perdón por tardar con el agradecimiento jaja!

Saludos.

@Hoose

Muchas gracias, Sater. Si me funciono. Perdón por tardar con el agradecimiento jaja!

Saludos.

Me alegro que te haya funcionado Y no problem. De nada!

---

I am the bone of my sword.