Next, I have two html pages in the expense posting system. One page is called launchings.html and the other one is called records.html. The first page is where I'm going to post the expenses and the second is where the expense records posted on the first page will be.
I'll write the codes of the two just below:
Launches.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lançamento de Despesas</title>
<link rel="stylesheet" href="css/lancamentos.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="logo">
<img src="/images/logo-defensoria-ms.png" alt="logo">
<h2>Defensoria Pública de Mato Grosso do Sul</h2>
<h3>Sistema de Lançamento de Despesas</h3>
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">Lançamento de Despesas</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="mesPagamento">Mês/Pagamento</label>
<select class="form-control input-lg" id="despesa_mesPagamento" name="mesPagamento">
<option value="" selected="selected">Mês de Pagamento</option>
<option value="Janeiro">Janeiro</option>
<option value="Fevereiro">Fevereiro</option>
<option value="Março">Março</option>
<option value="Abril">Abril</option>
<option value="Maio">Maio</option>
<option value="Junho">Junho</option>
<option value="Julho">Julho</option>
<option value="Agosto">Agosto</option>
<option value="Setembro">Setembro</option>
<option value="Outubro">Outubro</option>
<option value="Novembro">Novembro</option>
<option value="Dezembro">Dezembro</option>
</select>
</div>
<div class="form-group">
<label for="mesReferencia">Mês/Referência</label>
<select class="form-control input-lg" id="despesa_mesReferencia" name="mesReferencia">
<option value="" selected="selected">Mês de Referência</option>
<option value="Janeiro">Janeiro</option>
<option value="Fevereiro">Fevereiro</option>
<option value="Março">Março</option>
<option value="Abril">Abril</option>
<option value="Maio">Maio</option>
<option value="Junho">Junho</option>
<option value="Julho">Julho</option>
<option value="Agosto">Agosto</option>
<option value="Setembro">Setembro</option>
<option value="Outubro">Outubro</option>
<option value="Novembro">Novembro</option>
<option value="Dezembro">Dezembro</option>
</select>
</div>
<div class="form-group">
<label for="ano">Ano</label>
<input type="number" name="ano" id="despesa_ano" class="form-control input-lg" placeholder="Inserir o ano">
</div>
<div class="form-group">
<label for="contrato">Contrato</label>
<input type="text" name="contrato" id="despesa_contrato" class="form-control input-lg" placeholder="Inserir o número do contrato">
</div>
<div class="form-group">
<label for="dataPagamento">Data/Pagamento</label>
<input type="date" name="dataPagamento" id="despesa_dataPagamento" class="form-control input-lg" placeholder="Inserir a data de pagamento">
</div>
<div class="form-group">
<label for="fornecedor">Fornecedor</label>
<input type="text" name="fornecedor" id="despesa_fornecedor" class="form-control input-lg" placeholder="Inserir o fornecedor do serviço/produto">
</div>
<div class="form-group">
<label for="descricao">Descrição do Serviço</label>
<input type="text" name="descricao" id="despesa_descricao" class="form-control input-lg" placeholder="Inserir a descrição do serviço/produto">
</div>
<div class="form-group">
<label for="nfFatura">NF/Fatura</label>
<input type="text" name="nfFatura" id="despesa_nfFatura" class="form-control input-lg" placeholder="Inserir o número da NF/Fatura">
</div>
<div class="form-group">
<label for="valor">Valor R$</label>
<input type="number" name="valor" id="despesa_valor" class="form-control input-lg" placeholder="Inserir o valor do serviço/produto">
</div>
<div class="form-group">
<label for="localServico">Local/Serviço</label>
<input type="text" name="localServico" id="despesa_localServico" class="form-control input-lg" placeholder="Inserir o local da realização do serviço">
</div>
<div class="form-group">
<label for="mUcContrato">Matrícula/UC/Contrato</label>
<input type="text" name="mUcContrato" id="despesa_mUcContrato" class="form-control input-lg" placeholder="Matrícula/UC/Contrato ">
</div>
<div class="form-group">
<label for="consumo">Consumo</label>
<input type="text" name="consumo" id="despesa_consumo" class="form-control input-lg" placeholder="Inserir consumo">
</div>
<div class="form-group">
<label for="comarca">Comarca</label>
<input type="text" name="comarca" id="despesa_comarca" class="form-control input-lg" placeholder="Inserir a comarca">
</div>
<div class="form-group">
<button type="button" id="updateButton" onclick="despesaUpdate();" class="btn btn-lg btn-primary">
Adicionar Despesa
</button>
<button type="button" id="updateButton1" onclick="despesaUpdate();" class="btn btn-lg btn-primary">
Sair
</button>
</div>
</form>
</div>
</div>
<!--// .panel -->
</div>
<!--// .col-md -->
</div>
<!--// .row -->
</body>
</html>
records.html
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Registros</title>
<link rel="stylesheet" href="css/registros.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="logo">
<img src="/images/logo-defensoria-ms.png" alt="logo">
<h2>Defensoria Pública de Mato Grosso do Sul</h2>
<h3>Sistema de Lançamento de Despesas</h3>
</div>
<div class="container">
<div class="row">
<div class="col-md-13">
</div>
<!--// .col-md-12 -->
</div>
<!--// .row -->
<div class="row">
<div class="col-md-13">
<table id="despesaTable" class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th id="pagamento">Mês/Pagamento</th>
<th id="referencia">Mês/Referência</th>
<th id="ano">Ano</th>
<th id="contrato">Contrato</th>
<th id="datap">Data/Pagamento</th>
<th id="fornecedor">Fornecedor</th>
<th id="servicos">Descrição do Serviço</th>
<th id="nf">NF/Fatura</th>
<th id="valor">Valor R$</th>
<th id="local">Local/Serviço</th>
<th id="matricula">Matrícula/UC/Contrato</th>
<th id="consumo">Consumo</th>
<th id="comarca">Comarca</th>
</tr>
</thead>
</table>
</div>
<!--// .col-md-13 -->
</div>
<!--// .container -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
// Próximo ID para adicionar uma nova despesa
var _nextId = 1;
// ID da despesa que está sendo editada
var _activeId = 0;
function formClear() {
$("#despesa_mesPagamento").val("");
$("#despesa_mesReferencia").val("");
$("#despesa_ano").val("");
$("#despesa_contrato").val("");
$("#despesa_dataPagamento").val("");
$("#despesa_fornecedor").val("");
$("#despesa_descricao").val("");
$("#despesa_nfFatura").val("");
$("#despesa_valor").val("");
$("#despesa_localServico").val("");
$("#despesa_mUcContrato").val("");
$("#despesa_consumo").val("");
$("#despesa_comarca").val("");
}
function despesaBuildTableRow(id) {
var row = "<tr>" +
"<td>" + $("#despesa_mesPagamento").val() + "</td>" +
"<td>" + $("#despesa_mesReferencia").val() + "</td>" +
"<td>" + $("#despesa_ano").val() + "</td>" +
"<td>" + $("#despesa_contrato").val() + "</td>" +
"<td>" + $("#despesa_dataPagamento").val() + "</td>" +
"<td>" + $("#despesa_fornecedor").val() + "</td>" +
"<td>" + $("#despesa_descricao").val() + "</td>" +
"<td>" + $("#despesa_nfFatura").val() + "</td>" +
"<td>" + $("#despesa_valor").val() + "</td>" +
"<td>" + $("#despesa_localServico").val() + "</td>" +
"<td>" + $("#despesa_mUcContrato").val() + "</td>" +
"<td>" + $("#despesa_consumo").val() + "</td>" +
"<td>" + $("#despesa_comarca").val() + "</td>" +
"<td>" +
"<button type='button' " +
"onclick='despesaDisplay(this);' " +
"class='btn btn-default'" +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-edit'></span>" +
"</button>" +
"</td>" +
"<td>" +
"<button type='button' " +
"onclick='despesaDelete(this);' " +
"class='btn btn-default'" +
"data-id='" + id + "'>" +
"<span class='glyphicon glyphicon-remove'></span>" +
"</button>" +
"</td>" +
"</tr>"
return row;
}
function despesaAddToTable() {
// Primeiro verifica se a tag <tbody> existe. Adiciona um caso não exista
if ($("#despesaTable tbody").length == 0) {
$("#despesaTable").append("<tbody></tbody>");
}
// Adiciona a despesa na Tabela
$("#despesaTable tbody").append(despesaBuildTableRow(_nextId));
// Incrementamos o nextId
_nextId += 1;
}
function despesaDelete(button_delete) {
$(button_delete).parents("tr").remove();
}
function despesaDisplay(button_edit) {
var row = $(button_edit).parents("tr");
var cols = row.children("td");
_activeId = $($(cols[13]).children("button")[0]).data("id");
$("#despesa_mesPagamento").val($(cols[0]).text());
$("#despesa_mesReferencia").val($(cols[1]).text());
$("#despesa_contrato").val($(cols[2]).text());
$("#despesa_ano").val($(cols[3]).text());
$("#despesa_dataPagamento").val($(cols[4]).text());
$("#despesa_fornecedor").val($(cols[5]).text());
$("#despesa_descricao").val($(cols[6]).text());
$("#despesa_nfFatura").val($(cols[7]).text());
$("#despesa_valor").val($(cols[8]).text());
$("#despesa_localServico").val($(cols[9]).text());
$("#despesa_mUcContrato").val($(cols[10]).text());
$("#despesa_consumo").val($(cols[11]).text());
$("#despesa_comarca").val($(cols[12]).text());
// Mudar o texto do Botão
$("#updateButton").text("Atualizar");
}
function despesaUpdateInTable(id) {
// Encontra a despesa na tabela
var row = $("#despesaTable button[data-id='" + id + "']").parents("tr")[0];
// Adiciona a linha modifica na tabela
$(row).after(despesaBuildTableRow());
// Remover a linha antiga
$(row).remove();
// Limpar o formulário
formClear();
// Mudar o texto do Botão
$("#updateButton").text("Adicionar Despesa");
}
function despesaUpdate() {
if ($("#despesa_mesPagamento").val() != null && $("#despesa_title").val() != '') {
if ($("#updateButton").text() == "Atualizar") {
despesaUpdateInTable(_activeId);
} else {
// Adiciona a despesa na Tabela
despesaAddToTable();
}
// Limpa o formulário
formClear();
// Mantém o foco no campo Título
$("#despesa_mesPagamento").focus();
}
}
</script>
</body>
</html>
What I can not do is to have the postings made on the page.html page appear on the page.html records.
Can you help me with this?