javascript - 如何将动态表中的数据存储到数据库中

标签 javascript java database spring-boot thymeleaf

我正在尝试弄清楚如何将动态表中的数据存储到数据库中。

想法是这样的:我正在开发一个系统来控制驾驶员的旅程。它基本上会存储司机的白天工作，将其分成不同的时间间隔，例如:驾驶时间、用餐时间、等待时间等(所有这些都以 HH:MM 为单位)。他们将添加到不同的表中，如下图所示。

Journey Control

每个表的输入数据(小时)可以不同。这将取决于驾驶员一天的行程。我需要捕获这些时间并将其存储在数据库中。

我最好的想法是在用户结束输入后获取所有这些时间，但是如果我没有字段的名称，我该如何存储它？

附加信息:我正在使用 Java、SpringBoot 和 Thymeleaf 来开发它。

JourneyControl.RegisterHourJourney = (function() {
    var counterDriving = 0;
    var counterInterval = 0;
    var counterMeal = 0;
    var counterWaiting = 0;
    var counterRest = 0;

    function RegisterJourneyHour() {
        this.novaDrivingBtn = $('.js-add-new-direcao');
        this.novoIntervalBtn = $('.js-add-new-intervalo');
        this.novaMealBtn = $('.js-add-new-refeicao');
        this.novaWaitingBtn = $('.js-add-new-espera');
        this.novoRestBtn = $('.js-add-new-pernoite');

        this.deleteDrivingBtn = $('#direcaot');
        this.deleteIntervalBtn = $('#intervalot');
        this.deleteMealBtn = $('#refeicaot');
        this.deleteWaitingBtn = $('#esperat');
        this.deleteRestBtn = $('#pernoitet');
    }

    RegisterHourJourney.prototype.start = function() {
        this.novaDrivingBtn.on('click', onAdicionarHourDriving.bind());
        this.novoIntervalBtn.on('click', onAdicionarHourInterval.bind());
        this.novaMealBtn.on('click', onAdicionarHourMeal.bind());
        this.novaWaitingBtn.on('click', onAdicionarHourWaiting.bind());
        this.novoRestBtn.on('click', onAdicionarHourRest.bind());

        this.deleteDrivingBtn.on('click', '.js-delete-btn',
                onDeleteHourDriving.bind());
        this.deleteIntervalBtn.on('click', '.js-delete-btn',
                onDeleteHourInterval.bind());
        this.deleteMealBtn.on('click', '.js-delete-btn',
                onDeleteHourMeal.bind());
        this.deleteWaitingBtn.on('click', '.js-delete-btn',
                onDeleteHourWaiting.bind());
        this.deleteRestBtn.on('click', '.js-delete-btn',
                onDeleteHourRest.bind());
    }

    function onAdicionarHourDriving() {
        /*var newRow = $("<tr id=\" " + + counterDriving + " \">");*/       
        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-delete-btn" title="Delete" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
            newRow.append(cols);
            $("#direcaot").append(newRow);
            counterDriving++;
            $('#inicioDirecao').val('');
            $('#fimDirecao').val('');
        }
    }

    function onAdicionarHourInterval() {
        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-delete-btn" title="Delete" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
            newRow.append(cols);
            $("#intervalot").append(newRow);
            counterInterval++;
            $('#inicioIntervalo').val('');
            $('#fimIntervalo').val('');
        }
    }

    function onAdicionarHourMeal() {
        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-delete-btn" title="Delete" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
            newRow.append(cols);
            $("#refeicaot").append(newRow);
            counterMeal++;
            $('#inicioRefeicao').val('');
            $('#fimRefeicao').val('');
        }
    }

    function onAdicionarHourWaiting() {
        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-delete-btn" title="Delete" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
            newRow.append(cols);
            $("#esperat").append(newRow);
            counterWaiting++;
            $('#inicioEspera').val('');
            $('#fimEspera').val('');
        }
    }

    function onAdicionarHourRest() {
        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-delete-btn" title="Delete" href="#" ><i class="glyphicon glyphicon-remove"></i></a></td>';
            newRow.append(cols);
            $("#pernoitet").append(newRow);
            counterRest++;
            $('#inicioPernoite').val('');
            $('#fimPernoite').val('');
        }
    }

    function onDeleteHourDriving() {
        var item = document.activeElement;
        item.closest("tr").remove();
        counterDriving -= 1;
    }

    function onDeleteHourInterval() {
        var item = document.activeElement;
        item.closest("tr").remove();
        counterInterval -= 1;
    }

    function onDeleteHourMeal() {
        var item = document.activeElement;
        item.closest("tr").remove();
        counterMeal -= 1;
    }

    function onDeleteHourWaiting() {
        var item = document.activeElement;
        item.closest("tr").remove();
        counterWaiting -= 1;
    }

    function onDeleteHourRest() {
        var item = document.activeElement;
        item.closest("tr").remove();
        counterRest -= 1;
    }

    return RegisterHourJourney;
}());

$(function() {
    var RegisterHourJourney = new JourneyControl.RegisterHourJourney();
    RegisterHourJourney.start();
});
<body>
	<section layout:fragment="conteudo">
		<div class="page-header">
			<div class="container-fluid">
				<div class="row">
					<div class="col-xs-10">
						<h1>Journey Control</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">Search Journey</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">Date</label>
						<input id="data" type="text" class="form-control js-date" />
					</div>
					
					<div class="col-sm-5 form-group field-required">
						<label for="motorista" class="control-label">Driver</label>
						<input id="motorista" type="text" class="form-control" autofocus="autofocus" />
					</div>

					<div class="col-sm-1 form-group">
						<label class="control-label">Day off</label>
						<div>
							<input type="checkbox" class="js-status" data-size="small" data-off-color="danger"
									data-on-text="Yes" data-off-text="No" />
						</div>
					</div>
				</div>
				
				<div class="row">
					<div class="col-sm-7 form-group">
						<fieldset class="fieldset-border">
							<legend class="legend-border">Driving Time</legend>

							<div class="form-group row">
								<!-- <label for="inicioDirecao" class="col-sm-1 col-form-label">Start</label> -->
								<label for="inicioDirecao" class="col-sm-1 col-form-label">Start</label>
								<div class="col-sm-3">
									<input id="inicioDirecao" type="text" class="form-control js-hora">
									<input type="hidden" value="DIRECAO"/>
								</div>

								<label for="EndDirecao" class="col-sm-1 col-form-label">End</label>
								<div class="col-sm-3">
									<input id="EndDirecao" type="text" class="form-control js-hora">
									<input type="hidden" value="DIRECAO"/>
								</div>
								
								<div class="form-group col-sm-2">
									<button type="button" class="btn  btn-primary js-add-new-direcao">Add</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>Start</th>
												<th>End</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">Driving Interval</legend>

							<div class="form-group row">
								<label for="inicioIntervalo" class="col-sm-1 col-form-label">Start</label>
								<div class="col-sm-3">
									<input id="inicioIntervalo" type="text" class="form-control js-hora">
									<input type="hidden" value="INTERVALO"/>
								</div>

								<label for="EndIntervalo" class="col-sm-1 col-form-label">End</label>
								<div class="col-sm-3">
									<input id="EndIntervalo" 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">Add</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>Start</th>
												<th>End</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">Meal</legend>

							<div class="form-group row">
								<label for="inicioRefeicao" class="col-sm-1 col-form-label">Start</label>
								<div class="col-sm-3">
									<input id="inicioRefeicao" type="text" class="form-control js-hora">
									<input type="hidden" value="REFEICAO"/>
								</div>

								<label for="EndRefeicao" class="col-sm-1 col-form-label">End</label>
								<div class="col-sm-3">
									<input id="EndRefeicao" 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">Add</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>Start</th>
												<th>End</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">Waiting Time</legend>

							<div class="form-group row">
								<label for="inicioEspera" class="col-sm-1 col-form-label">Start</label>
								<div class="col-sm-3">
									<input id="inicioEspera" type="text" class="form-control js-hora">
									<input type="hidden" value="ESPERA"/>
								</div>

								<label for="EndEspera" class="col-sm-1 col-form-label">End</label>
								<div class="col-sm-3">
									<input id="EndEspera" 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">Add</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>Start</th>
												<th>End</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">Rest</legend>

							<div class="form-group row">
								<label for="inicioPernoite" class="col-sm-1 col-form-label">Start</label>
								<div class="col-sm-3">
									<input id="inicioPernoite" type="text" class="form-control js-hora">
									<input type="hidden" value="PERNOITE"/>
								</div>

								<label for="EndPernoite" class="col-sm-1 col-form-label">End</label>
								<div class="col-sm-3">
									<input id="EndPernoite" 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">Add</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>Start</th>
												<th>End</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>
	</section>
	<th:block layout:fragment="javascript-extra">
		<script th:src="@{/javascripts/jornada.mascara-horas.js}"></script>
		<script th:src="@{/javascripts/vendors/bootstrap-switch.min.js}"></script>
		<script th:src="@{/javascripts/cadastro_jornada.js}"></script>
		<script>
			$('.js-status').bootstrapSwitch();
		</script>
		
	</th:block>
</body>

最佳答案

用餐示例:

当您添加新行时，请按照 name="meal["+ nextMeal + "]" 的方式为其命名，此命名法会将您的新餐食映射到餐食列表在表单提交的 Controller 中。

要知道 nextMeal 的正确值是多少，请执行以下操作:

var nextMeal = 0;           
while($("tr[name='nextMeal[" + nextMeal + "]']").length){
    nextMeal++;
}

关于javascript - 如何将动态表中的数据存储到数据库中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58386010/

上一篇：c++ - 表达式: Sequence not ordered

下一篇：在 R 中仅读取 Stata .DTA 文件的一部分

相关文章：

javascript - 如果 id 与 php 中的 session id 不相关，如何重定向页面

java - 将特定的 servlet 映射为 Tomcat 中的默认 servlet

java - Android解析json响应中的特殊字符

sql - 通过重复的层次结构检查连接查询

javascript - 使用 JavaScript 将数据从 .csv 文件导入到 HTML 表

javascript - Backbone.js 中的变量范围

java - 如何在 Java 中复制并用字符数组替换现有字符串

javascript - 如何比较Sequelize中的两个日期？

mysql - 多表还是单表？

javascript - 弧线显示射击游戏中剩余的重新加载时间

©2024 IT工具网  联系我们