¡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=""> </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> </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?