Debo de agregar filas a una tabla mediante Jquery, no he podido ver el error en la consola, en la magen se aprecia lo que debo de hacer después de darle clic al botón agregar invitado del formulario modal:
$(document).ready(function(){
$("#add").click(function(){
addRow();
});
});
//Adiciona una fila con los datos a la tabla
function addRow() {
const row = createRow({
firstName: $('first-name').val(),
lastName: $('last-name').val(),
celPhone: $('mobile-number').val(),
confirmed: $('confirmed').val()});
$('tbody').prepend(row);
clean();
}
//Crea los datos de la fila de la tabla
function createRow(data) { return (
`<tr>` +
`<td>${data.firstName}</td>` +
`<td>${data.lastName}</td>` +
`<td>${data.celphone}</td>` +
`<td>${data.confirmed}</td>` +
`</tr>`
);
}
//Limpia los dato que ingresa el usuario
function clean() {
$('#firstName').val('');
$('#lasttName').val('');
$('#celPhone').val('');
$('#confirmed').val('');
$('#firstName').focus();
}
action {
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lista de Invitados</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
<h1>Lista de Invitados</h1>
<div class="action text-right">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#new-guest">Nuevo Invitado</button>
</div>
<table class="table bordered-table table-striped">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido</th>
<th class="text-center">Celular</th>
<th class="text-center">Confirmado</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="new-guest" tabindex="-1" role="dialog" aria-labelledby="new-guest">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Nuevo Invitado</h4>
</div>
<form class="form-horizontal">
<div class="modal-body">
<div class="form-group">
<label for="first-name" class="col-sm-3 control-label">Nombre:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="first-name" autofocus>
</div>
</div>
<div class="form-group">
<label for="last-name" class="col-sm-3 control-label">Apellido:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="last-name">
</div>
</div>
<div class="form-group">
<label for="mobile-number" class="col-sm-3 control-label">Celular:</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="mobile-number">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<div class="checkbox">
<label>
<input type="checkbox" id="confirmed"> Confirmado
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
<button type="submit" id="add" class="btn btn-primary">Agregar Invitado</button>
</div>
</form>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>