Añadir filas a tabla desde inputos con jQuery

[Hoose]

¡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?

[killpe]

Yo acabo de hacer algo parecido, por mis conocimientos limitados de javascript leo que te refieres a una tabla que no existe, la has construido con capas / divisores..

el código que yo he usado es este:

la parte html

Código HTML:

<form action="guardar.php" id="Agarticulos" method="post" >
<table>
<tr>
		<td><input type="number" name="cantidad" id="cantidad" ></td>
		<td><input type="text" name="nombre id="Articulo" autocomplete="off" ></td>
		<td><input type="number" name="precio" id="precio></td>
		<td><input type="number" name="coeficiente" id="coeficiente"></td>
		<td><input type="number" name="descu" id="descu"></td>
		<td><input type="number" name="total" disabled id="total" placeholder="Subtotal"></td>
		<td><input id="agregarln" onclick="AddLinea(this.form);" type="button" value="agregar" /></td>
</tr>
</table> 

parte javascript

Código:

var LineaNum = 0;
function AddLinea(frm) {
	LineaNum ++;
	var Linea = '<tr id="LineaNum'+LineaNum+'" class="Lineasdoc"><td class="uni"><input type="hidden" name="cantidad['+LineaNum+']" value="'+frm.cantidad.value+'">'+frm.cantidad.value+'</td><td><input type="hidden" name="nombre['+LineaNum+']" value="'+frm.nombre.value+'">'+frm.nombre.value+'</td><td class="precio"><input type="hidden" name="precio['+LineaNum+']" value="'+frm.precio.value+'">'+frm.precio.value+'</td><td class="coef"><input type="hidden" name="coeficiente['+LineaNum+']" value="'+frm.coeficiente.value+'">'+frm.coeficiente.value+'</td><td class="desc"><input type="hidden" name="descu['+LineaNum+']" value="'+frm.descu.value+'">'+frm.descu.value+'</td><td class="subtotal"><input type="hidden" name="total['+LineaNum+']" value="'+frm.total.value+'">'+frm.total.value+'</td><td class="opciones"><button class="botonrojo" onclick="EliminarLinea('+LineaNum+' ,'+frm.total.value+');">Borrar</button></td></tr>';
	jQuery('#LineasDocumento').append(Linea);
	frm.nombre.value = '';
	frm.cantidad.value = '';
	frm.precio.value = '';
	frm.coeficiente.value = '';
	frm.descu.value = '';
	frm.total.value = '';
	}
}

function EliminarLinea(rnum,descontar) {
	jQuery('#LineaNum'+rnum).remove();
        return true;
}

es posible que haya fallos de sintaxis por que te he quitado código de otras cosas que hago y para no liarte demasiado lo he quitado... a ver si te sirve y me das tus dies...