Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/11/2015, 14:45
Avatar de Hoose
Hoose
 
Fecha de Ingreso: noviembre-2015
Ubicación: Manzanillo
Mensajes: 1
Antigüedad: 9 años, 1 mes
Puntos: 0
Pregunta Añadir filas a tabla desde inputos con jQuery

¡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.
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
Código:
$(document).ready(function(){
     $('#agregarCompetencia').click(function(){

          var unidadCompetencia = $('#unidadCompetencia').val();
          var tiempoCompetencia = $('#tiempoCompetencia').val();


          $('#insertarUnidadCompetencia').text(unidadCompetencia);
          $('#insertarTiempoCompetencia').text(tiempoCompetencia);
          $('.ocultarCompetencia').removeClass('ocultarCompetencia');

          $('#tablaCompetencia tbody>tr:last').insertAfter('#tablaCompetencia tbody>tr:last');

          $('#unidadCompetencia').val("");
          $('#tiempoCompetencia').val("");
     });
});
La previsualización es esta:




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?