Seguinte, tenho duas páginas html no sistema de lançamentos de despesas. Uma página se chama lancamentos.html e a outra se chama registros.html. A primeira página é onde eu vou lançar as despesas e a segunda é onde vão ficar os registros de despesas lançadas na primeira página.
Vou escrever os códigos das duas logo abaixo:
lancamentos.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>
registros.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>
O que eu não estou conseguindo fazer é com que os lançamentos de despesas feitos na página lancamentos.html apareçam na página registros.html.
Vocês podem me ajudar nisso??
storage
no navegador usando localStorage ou sessionStorage e recupera na outra página. 2º - Você chamou diversas vezes o bootstrap antes do jQuery e assim não funciona.