Estoy intentando agregar una fila a una tabla con datos provenientes de un modal que contiene un formulario, pero no se porque razon no se me agrega.
Agradeceria una solución, Muchas Gracias
$(document).ready(function() {
$('#btnEnviar').click(function() {
const unidad = $('#unidad').val();
const introduccion = $('#introduccion').val();
const repaso = $('#repaso').val();
var fila = '<tr><th scope="row">1</th><td>' + unidad + '</td><td>' + introduccion + '</td><td>' + repaso + '</td><td><input type="checkbox"></td><td class="botonesCursos"><div class="containter row"><button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button><button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button><a href="admRecursos.html"><button type="button" class="btn btn-success mr-1 btn-sm">Adm Recursos</button></a></div></td></tr>'
$('#tablaUnidades').append(fila);
});
});
<div id="misUnidades" class="container col-md-11 mt-4">
<table class="table" id="tablaUnidades">
<thead class="thead-dark">
<tr>
<th scope="col">Mis Unidades</th>
<th colspan="5" style="text-align: right"> Curso: Introducción a la programación</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="4">Estas son las unidades de los cursos - Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus dicta eligendi nulla vero eveniet nisi ipsam impedit alias qui nihil.</td>
</tr>
</tbody>
<thead class="thead-dark">
<tr>
<th scope="col" class="colWidth">#</th>
<th scope="col">Unidad</th>
<th scope="col">Introducción</th>
<th scope="col">Repaso</th>
<th scope="col" class="colWidth">Activo</th>
<th scope="col">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search..." aria-label="Recipient's username" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-light" type="button" id="button-addon2">Buscar</button>
</div>
</div>
</th>
</tr>
</thead>
<tbody id="filas">
<tr>
<th scope="row">1</th>
<td>Variables</td>
<td>En esta unidad...</td>
<td>Hemos visto en...</td>
<td><input type="checkbox"></td>
<td class="botonesCursos">
<div class="containter row">
<button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button>
<button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button>
<a href="admRecursos.html">
<button type="button" class="btn btn-success mr-1 btn-sm">Adm Recursos</button>
</a>
</div>
</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Flujo de control</td>
<td>En esta unidad...</td>
<td>Hemos visto en...</td>
<td><input type="checkbox"></td>
<td class="botonesCursos">
<div class="containter row">
<button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button>
<button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button>
<a href="admRecursos.html">
<button type="button" class="btn btn-success mr-1 btn-sm">Adm Recursos</button>
</a>
</div>
</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Recursividad</td>
<td>En esta unidad...</td>
<td>Hemos visto en...</td>
<td><input type="checkbox"></td>
<td class="botonesCursos">
<div class="containter row">
<button type="button" class="btn btn-warning mr-1 btn-sm">Editar</button>
<button type="button" class="btn btn-primary mr-1 btn-sm">Previsualizar</button>
<a href="admRecursos.html">
<button type="button" class="btn btn-success btn-sm">Adm Recursos</button>
</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--Fin tabla de unidades-->
<div id="botones" class="container d-flex justify-content-center">
<button type="button" class="btn btn-outline-primary btn-lg">Volver</button>
<button type="button" class="btn btn-outline-success btn-lg" data-toggle="modal" data-target="#modelId">Nueva Unidad</button>
<button type="button" class="btn btn-outline-secondary btn-lg">Imprimir</button>
</div>
</main>
<!--MODAL-->
<div class="modal fade md-6 border rounded" id="modelId" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="container">
<form action="" id="formularioNuevaUnidad">
<div class="input-group">
<input type="text" class="form-control" id="unidad" placeholder="Unidad">
</div>
<div class="input-group mt-4">
<input type="text" class="form-control" id="introduccion" placeholder="Introduccion">
</div>
<div class="input-group mt-4">
<input type="text" class="form-control" id="repaso" placeholder="Repaso">
</div>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
<button type="submit" class="btn btn-success" id="btnEnviar">Agregar</button>
</form>
</div>
</div>
</div>
</div>