0

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??

5
  • Bom cara é o seguinte: - Você está tentando passar dados de uma página para outra diretamente, e isto não existe. Você tem que ou mandar os dados da página lancamentos.html para um Banco de dados e recuperá-los na página registros.html ou você os armazena em um storage no navegador usando localStorage ou sessionStorage e recupera na outra página. - Você chamou diversas vezes o bootstrap antes do jQuery e assim não funciona.
    – LeAndrade
    27/09/2018 às 15:34
  • Qual das duas opções você acha melhor, banco de dados ou localStorage?
    – E.M C.
    27/09/2018 às 18:57
  • Bom, depende muito do que quer fazer, o mais indicado e mais seguro tratando-se de dados é enviar para um banco de dados. Também não é muito prático usar storage com um grande número de dados, fica muito trabalhoso.
    – LeAndrade
    27/09/2018 às 20:40
  • E na verdade se você não pretende persistir essas informações em algum repositório, não faria nem muito sentido construir a sua interface em diversas páginas... 27/09/2018 às 22:57
  • Obrigado pelas respostas pessoal
    – E.M C.
    29/09/2018 às 0:54

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .