Boa noite galera.
Estou com dificuldade de como fazer para pegar os dados de uma tabela dinâmica e gravar essas informações no banco de dados.
A ideia é a seguinte, é um sistema para controlar de jornada de trabalho de motoristas.
Os funcionários vão digitar as entradas de horas (direção, intervalo, refeição, etc) e vão clicar no adicionar (tentei adicionar uma imagem para ficar mais claro, mas não achei a opção).
A quantidade de entrada pode variar, de acordo com os horários feito pelo motorista… A quantidade de entrada pode variar, de acordo com os horários feito pelo motorista.
Ai eu preciso pegar essas horas e jogar elas no banco de dados.
Pelo que eu imagino a melhor forma é pegar os dados após o usuário ter digitado os dados
Minha dúvida é… Como eu faço para pegar esses dados nas tabelas, já que eu não tenho o nome dos campos?
Não sei se faz diferença, mas eu estou usando Java, SpringBoot, Thymeleaf no desenvolvimento
Tela de cadastro
CadastrarJornada.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
xmlns:cj="http://www.controle-jornada.com"
layout:decorate="~{layout/LayoutPadrao}">
<head>
<title>Cadastrar jornada</title>
<link rel="stylesheet" type="text/css" th:href="@{/stylesheets/vendors/bootstrap-switch.min.css}">
</head>
<body>
<section layout:fragment="conteudo">
<div class="page-header">
<div class="container-fluid">
<div class="row">
<div class="col-xs-10">
<h1>Cadastrar jornada</h1>
<!-- <h1 th:if="${empresa.nova}">Cadastrar jornada</h1> -->
<!-- <h1 th:unless="${empresa.nova}" th:text="|Editar empresa - ${empresa.razaoSocial}|">Editar jornada</h1> -->
</div>
<div class="col-xs-2">
<div class="aw-page-header-controls">
<!-- <a class="btn btn-default" th:href="@{/empresas}"> -->
<a class="btn btn-default">
<i class="glyphicon glyphicon-plus-sign"></i>
<span class="hidden-xs hidden-sm">Pesquisar jornada</span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<!-- <form method="POST" th:object="${jornada}" class="form-vertical js-form-loading"
th:action="${empresa.nova} ? @{/empresas/nova} : @{/empresas/{codigo}(codigo=${empresa.codigo})}"> -->
<form class="form-vertical js-form-loading">
<!-- <cj:message/> -->
<!-- <input type="hidden" th:field="*{codigo}" /> -->
<div class="row">
<div class="col-sm-2 form-group field-required">
<label for="data" class="control-label">Data</label>
<input id="data" type="text" class="form-control js-date" />
</div>
<div class="col-sm-4 form-group field-required">
<label for="nomeMotorista" class="control-label">Motorista</label>
<div class="input-group">
<!-- <input id="codigoMotorista" type="hidden" th:field="*{motorista}" /> -->
<!-- <input id="nomeMotorista" type="text" readonly="readonly" class="form-control" th:field="*{motorista.nome}"
placeholder="Clique na lupa para pesquisar o motorista" /> -->
<input id="codigoMotorista" type="hidden" />
<input id="nomeMotorista" type="text" readonly="readonly" class="form-control"
placeholder="Clique na lupa para pesquisar o motorista" />
<span class="input-group-btn">
<button class="btn btn-default js-tooltip" type="button" title="Pesquisa avançada"
data-toggle="modal" data-target="#pesquisaRapidaMotoristas">
<i class="glyphicon glyphicon-search"></i>
</button>
</span>
</div>
</div>
<div class="col-sm-1 form-group">
<label class="control-label">Folga</label>
<div>
<input type="checkbox" class="js-status" data-size="small" data-off-color="danger"
data-on-text="Sim" data-off-text="Não" />
</div>
</div>
<button type="button" class="btn btn-primary js-ler-dados">Ler dados</button>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Tempo de direção</legend>
<div class="form-group row">
<!-- <label for="inicioDirecao" class="col-sm-1 col-form-label">Início</label> -->
<label for="inicioDirecao" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioDirecao" type="text" class="form-control js-hora">
<input type="hidden" value="DIRECAO"/>
</div>
<label for="fimDirecao" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimDirecao" type="text" class="form-control js-hora">
<input id="direcao" type="hidden" value="DIRECAO"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-direcao">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table id="table-direcao" class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="direcaot">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Intervalo de direção</legend>
<div class="form-group row">
<label for="inicioIntervalo" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioIntervalo" type="text" class="form-control js-hora">
<input type="hidden" value="INTERVALO"/>
</div>
<label for="fimIntervalo" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimIntervalo" type="text" class="form-control js-hora">
<input type="hidden" value="INTERVALO"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-intervalo">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="intervalot">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Refeição</legend>
<div class="form-group row">
<label for="inicioRefeicao" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioRefeicao" type="text" class="form-control js-hora">
<input type="hidden" value="REFEICAO"/>
</div>
<label for="fimRefeicao" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimRefeicao" type="text" class="form-control js-hora">
<input type="hidden" value="REFEICAO"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-refeicao">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="refeicaot">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Tempo de Espera</legend>
<div class="form-group row">
<label for="inicioEspera" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioEspera" type="text" class="form-control js-hora">
<input type="hidden" value="ESPERA"/>
</div>
<label for="fimEspera" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimEspera" type="text" class="form-control js-hora">
<input type="hidden" value="ESPERA"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-espera">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="esperat">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="row">
<div class="col-sm-7 form-group">
<fieldset class="fieldset-border">
<legend class="legend-border">Descanso/Pernoite</legend>
<div class="form-group row">
<label for="inicioPernoite" class="col-sm-1 col-form-label">Início</label>
<div class="col-sm-3">
<input id="inicioPernoite" type="text" class="form-control js-hora">
<input type="hidden" value="PERNOITE"/>
</div>
<label for="fimPernoite" class="col-sm-1 col-form-label">Fim</label>
<div class="col-sm-3">
<input id="fimPernoite" type="text" class="form-control js-hora">
<input type="hidden" value="PERNOITE"/>
</div>
<div class="form-group col-sm-2">
<button type="button" class="btn btn-primary js-add-new-pernoite">Adicionar</button>
</div>
</div>
<div class="form-group row">
<div class="table-responsive bw-tabela-simples col-sm-10">
<table class="table table-hover">
<thead>
<tr>
<th>Início</th>
<th>Fim</th>
<th></th>
</tr>
</thead>
<tbody id="pernoitet">
</tbody>
</table>
</div>
</div>
</fieldset>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary" type="submit">Salvar</button>
</div>
</form>
</div>
<th:block th:replace="motorista/PesquisaRapidaMotoristas :: pesquisaRapidaMotoristas"></th:block>
</section>
<th:block layout:fragment="javascript-extra">
<script th:src="@{/javascripts/vendors/bootstrap-switch.min.js}"></script>
<script th:src="@{/javascripts/jornada.registrar-horas.js}"></script>
<script th:src="@{/javascripts/jornada.mascara-horas.js}"></script>
<script th:src="@{/javascripts/vendors/handlebars.min.js}"></script>
<script th:src="@{/javascripts/motorista.pesquisa-rapida.js}"></script>
<script th:src="@{/javascripts/jornada.ler-dados.js}"></script>
<script>
$('.js-status').bootstrapSwitch();
</script>
</th:block>
</body>
</html>
Adicionar elementos nas tabelas
jornada.registrar-horas.js
var ControleJornada = ControleJornada || {};
ControleJornada.RegistrarHorasJornada = (function() {
var counterDirecao = 0;
var counterIntervalo = 0;
var counterRefeicao = 0;
var counterEspera = 0;
var counterPernoite = 0;
function RegistrarHorasJornada() {
this.novaDirecaoBtn = $('.js-add-new-direcao');
this.novoIntervaloBtn = $('.js-add-new-intervalo');
this.novaRefeicaoBtn = $('.js-add-new-refeicao');
this.novaEsperaBtn = $('.js-add-new-espera');
this.novoPernoiteBtn = $('.js-add-new-pernoite');
this.excluirDirecaoBtn = $('#direcaot');
this.excluirIntervaloBtn = $('#intervalot');
this.excluirRefeicaoBtn = $('#refeicaot');
this.excluirEsperaBtn = $('#esperat');
this.excluirPernoiteBtn = $('#pernoitet');
}
RegistrarHorasJornada.prototype.iniciar = function() {
this.novaDirecaoBtn.on('click', onAdicionarHorasDirecao.bind());
this.novoIntervaloBtn.on('click', onAdicionarHorasIntervalo.bind());
this.novaRefeicaoBtn.on('click', onAdicionarHorasRefeicao.bind());
this.novaEsperaBtn.on('click', onAdicionarHorasEspera.bind());
this.novoPernoiteBtn.on('click', onAdicionarHorasPernoite.bind());
this.excluirDirecaoBtn.on('click', '.js-excluir-btn',
onExcluirHorasDirecao.bind());
this.excluirIntervaloBtn.on('click', '.js-excluir-btn',
onExcluirHorasIntervalo.bind());
this.excluirRefeicaoBtn.on('click', '.js-excluir-btn',
onExcluirHorasRefeicao.bind());
this.excluirEsperaBtn.on('click', '.js-excluir-btn',
onExcluirHorasEspera.bind());
this.excluirPernoiteBtn.on('click', '.js-excluir-btn',
onExcluirHorasPernoite.bind());
}
function onAdicionarHorasDirecao() {
/*var newRow = $("<tr id=\" " + + counterDirecao + " \">");*/
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioDirecao').val();
var inputFim = $('#fimDirecao').val();
var direcao = $('#direcao').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class=" btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#direcaot").append(newRow);
counterDirecao++;
$('#inicioDirecao').val('');
$('#fimDirecao').val('');
}
}
function onAdicionarHorasIntervalo() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioIntervalo').val();
var inputFim = $('#fimIntervalo').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#intervalot").append(newRow);
counterIntervalo++;
$('#inicioIntervalo').val('');
$('#fimIntervalo').val('');
}
}
function onAdicionarHorasRefeicao() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioRefeicao').val();
var inputFim = $('#fimRefeicao').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#refeicaot").append(newRow);
counterRefeicao++;
$('#inicioRefeicao').val('');
$('#fimRefeicao').val('');
}
}
function onAdicionarHorasEspera() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioEspera').val();
var inputFim = $('#fimEspera').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#esperat").append(newRow);
counterEspera++;
$('#inicioEspera').val('');
$('#fimEspera').val('');
}
}
function onAdicionarHorasPernoite() {
var newRow = $("<tr>");
var cols = "";
var inputInicio = $('#inicioPernoite').val();
var inputFim = $('#fimPernoite').val();
if (!inputInicio || !inputFim) {
alert('Os campos início e fim devem ser preenchidos.');
} else if (inputInicio.length != 5 || inputFim.length != 5) {
alert('Preencha as horas corretamente (HH:MM).');
} else {
cols += '<td>' + inputInicio + '</td>';
cols += '<td>' + inputFim + '</td>';
cols += '<td class="text-center"><a class="btn btn-link btn-xs js-tooltip js-excluir-btn" title="Excluir" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
newRow.append(cols);
$("#pernoitet").append(newRow);
counterPernoite++;
$('#inicioPernoite').val('');
$('#fimPernoite').val('');
}
}
function onExcluirHorasDirecao() {
var item = document.activeElement;
item.closest("tr").remove();
counterDirecao -= 1;
}
function onExcluirHorasIntervalo() {
var item = document.activeElement;
item.closest("tr").remove();
counterIntervalo -= 1;
}
function onExcluirHorasRefeicao() {
var item = document.activeElement;
item.closest("tr").remove();
counterRefeicao -= 1;
}
function onExcluirHorasEspera() {
var item = document.activeElement;
item.closest("tr").remove();
counterEspera -= 1;
}
function onExcluirHorasPernoite() {
var item = document.activeElement;
item.closest("tr").remove();
counterPernoite -= 1;
}
return RegistrarHorasJornada;
}());
$(function() {
var registrarHorasJornada = new ControleJornada.RegistrarHorasJornada();
registrarHorasJornada.iniciar();
});