Gerar tabela apenas com jquery

Felipe Paz · 26 de janeiro de 2017

E aí gurizada, beleza? É o seguinte... como eu faço para criar uma tabela dinâmica apenas para consultar? Há alguns campos e o que vai controlar a tabela será o campo prazo (este determinará quantas linhas terá a tabela) e o campo parcela ( este preencherá todas as células da tabela ). Como faria um loop para isso acontecer? Lembrando que não há necessidade de php, banco de dados nem nada, apenas o html e javascript puro.

DiF · 26 de janeiro de 2017

@Felipe Paz Olá, bom... só com estas informações fica meio complicado. Tem como dar uma explicação mais completa?

De onde vem os dados provenientes? Se for um xml ou json, você pode usar o javascript e adicionar dados em uma tabela...

Se possível, seria interessante postar a sua estrutura desta parte mostrada em imagem.

PS: o CSS é adicional, só se você quiser postar também.

Felipe Paz · 26 de janeiro de 2017

@DiF Os dados vêm e são processados na mesma página. Como vai funcionar: eu insiro o valor do crédito inicial no primeiro campo, o tempo do prazo em meses, o valor da parcela e o valor do juro anual (este eu converto para juro mensal). Ao clicar no botão calcular, gerará uma tabela calculando os reajustes com bases nos campos preenchidos. Na imagem abaixo eu inseri valores manualmente pra exemplificar como ficaria a tabela gerada pelo jquery. Veja bem, as linhas da tabela, serão geradas com base no valor do prazo. Portanto, se o prazo ( em meses) é de 120 meses, o cálculo é 120 / 12, resultando, então, em dez linhas na tabela, preenchendo cada célula com o valor da parcela reajustada anualmente em 6%, no exemplo da foto. Seria mais ou menos isso. O meu problema é só fazer esse loop que pega as informações e popula uma tabela. Se fosse no php, sei fazer tranquilamente, mas como isso é só uma ferramenta básica que to fazendo aqui no escritório pra ajudar no cálculo do reajuste dos juros, não é interessante ter que instalar algum servidor em cada computador ou até mesmo fazer o meu computador de servidor.

joseph_dev · 26 de janeiro de 2017

Opa!

Posta ai o código que você já tem do formulario com os campos e boao que já adianta um pouco pra gente tentar ver algo...

DiF · 26 de janeiro de 2017

@Felipe Paz Então, basicamente o que você vai fazer ali é pegar os valores dos campos fazer seus calculos.

Para criar a tabela, você pode criar um json e adicionar linhas na tabela.

Veja um exemplo: http://pt.stackoverflow.com/questions/56362/jquery-tabela-dinâmica

Na resposta do usuário Tobias Mesquita, ele mostra como pega os valores do formulário e cria um json e usa os atributos attr e append para incluir linha a linha.

Veja que ele monta as "TD" da tabela dentro do javascript.. Mas no caso dele, usou o atributo do HTML 5 que é os "data-attribute"

Existem outros modos também para montar a tabela dentro do jQuery. Recomendo começar por aí nas suas pesquisas!

Felipe Paz · 26 de janeiro de 2017

@joseqfneto

<body>
	<div class="calculo-div">
		<h1>Cálculo de reajuste final de crédito</h1>
        <form>
        	<table class="calculo">
            	<tr>
                	<td align="right">Valor Inicial</td>
                    <td><input type="text" name="creditoInicial" id="creditoInicial"></td>
                </tr>
                <tr>
                    <td align="right">Prazo</td>
                    <td><input type="text" name="prazo" id="prazo"></td>
                </tr>
                <tr>
                    <td align="right">Parcela</td>
                    <td><input type="text" name="parcela" id="parcela"></td>
                </tr>
                <tr>
                    <td align="right">Juro a.a.</td>
                    <td><input type="text" name="juro" id="juro"></td>
                </tr>
                <tr>
                    <td colspan="2" align="center"><input type="submit" value="Calcular" id="calcular"></td>
                 </tr>
                 <tr>
                    <td>Crédito final</td>
                    <td><input type="text" name="creditoFinal" id="creditoFinal"></td>
                 </tr>
                 <tr>
                    <td align="right">%</td>
                    <td><input type="text" name="porFinal" id="porFinal"></td>
                 </tr>
                 <tr>
                 	<td align="right">Entrada</td>
                    <td><input type="text" name="entrada" id="entrada"></td>
                 </tr>
            </table>
        </form>
	</div>
    <div class="juros">
		<table>
        	<thead>
            	<tr>
                	<td>Ano</td>
                    <td>Crédito Inicial</td>
                    <td>Janeiro</td>
                    <td>Fevereiro</td>
                    <td>Março</td>
                    <td>Abril</td>
                    <td>Maio</td>
                    <td>Junho</td>
                    <td>Julho</td>
                    <td>Agosto</td>
                    <td>Setembro</td>
                    <td>Outubro</td>
                    <td>Novembro</td>
                    <td>Dezembro</td>
                    <td>Saldo Devedor</td>
 	                <td style="border-right: none;">Crédito Atualizado</td>
				</tr>
			</thead>
            <tbody>
            	<tr>
                	<td>1</td>
                    <td>100.000,00</td>
           	        <td>1.200,00</td>
                    <td>1.200,00</td>
   	                <td>1.200,00</td>
           	        <td>1.200,00</td>
                    <td>1.200,00</td>
                    <td>1.200,00</td>
                    <td>1.200,00</td>
       	            <td>1.200,00</td>
                    <td>1.200,00</td>
                    <td>1.200,00</td>
                    <td>1.200,00</td>
                    <td>1.200,00</td>
                    <td>85.600,00</td>
                    <td style="border-right: none;">85.600,00</td>
				</tr>
                <tr>

E esse é o jquery simples por enquanto pra pegar os valores dos campos

$(document).ready(function(){
	$("#entrada").val("");
	$("form #creditoInicial").on('click',function(){
       	$("#creditoInicial").val("");
        $("#prazo").val("");
        $("#parcela").val("");
        $("#juro").val("");
        $("#entrada").val("");
        $("#creditoFinal").val("");
        $("#porFinal").val("");
    });

    $("#calcular").on('click', function(e){
       	e.preventDefault();
        var creditoInicial = $("#creditoInicial").val();
        var prazo = $("#prazo").val();
        var prazoAno = prazo / 12;
        var parcela = $("#parcela").val();
        var juro = $("#juro").val() / 12;
        var entrada = parseInt(creditoInicial * 0.01) + parseInt(parcela);
   	    if(creditoInicial == "" || parcela == "") {
           	$("#entrada").val("Valor inválido")
        } else {
            $("#entrada").val(entrada);   
        }
        $("#creditoInicial").focus();
        var i = 0;
            
        while(i < prazoAno){
   	    	alert(i);
            i++;
        }
        //Limpa os campos novamente
        $("#creditoInicial").val("");
        $("#prazo").val("");
        $("#parcela").val("");
        $("#juro").val("");
	});
});

adicionado 18 minutos depois

@DiF , pois é .. já tinha visto, achei q pudesse ter um jeito mais fácil. ... vou deixar no vba mesmo e passo a planilha depois pra quem for usar. Obrigado de qualquer maneira.

DiF · 26 de janeiro de 2017

@Felipe Paz O o que você pode fazer se desejar é utilizar o php e ajax. o php faria os calculos e geraria todos os dados necessários e você insere com ajax na tabela. Mas claro é tão trabalhoso quanto o jeito só por javascript...

é uma opção de solução.

joseph_dev · 26 de janeiro de 2017

Fiz algo rápido apenas como ideia. Acho que dá pra fazer mais ou menos assim...

Sua tabela ficaria assim com o tbody vazio de início:

<table id="tabela">
  <thead>
    <tr>
      <td>Ano</td>
      <td>Crédito Inicial</td>
      <td>Janeiro</td>
      <td>Fevereiro</td>
      <td>Março</td>
      <td>Abril</td>
      <td>Maio</td>
      <td>Junho</td>
      <td>Julho</td>
      <td>Agosto</td>
      <td>Setembro</td>
      <td>Outubro</td>
      <td>Novembro</td>
      <td>Dezembro</td>
      <td>Saldo Devedor</td>
      <td style="border-right: none;">Crédito Atualizado</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

O evento do botão seria nessa ideia aqui: Coloca um toggle() na tabela quando for mostrar os valores só pra ficar um pouco elegante...

$('#calcular').click(function(){
  //faz todo calculo e concatena dessa forma...
  var html = "<tr>"+
      "<td>1</td>"+
      "<td>100.000,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>1.200,00</td>"+
      "<td>85.600,00</td"+
      "<td>85.600,00</td>"+
      "</tr>";
  $('#tabela > tbody').append(html);
  )};

Os cálculos você faz aí com base nos campos...

Foi isso que entendi... era isso mesmo?

DiF · 26 de janeiro de 2017

@joseqfneto Pelo que entendi é quase isso. Só que no lugar dessas todos com estes valores, é variáveis!

@Felipe Paz Achei um plugin jQuery que pode resolver seu problema.

Tudo que tens a fazer é ter um json já com os valores calculados e por ajax inserir eles.

Minha sugestão é que tentes usar este plugin, e gerar o json à partir dos seus cálculos.

Podes até usar o php se quiser, para fazer os cálculos e retornar os dados já em json.

PS: No site deles, não tem exemplo com php, mas a lógica é a mesma.

Se tiver interesse, aqui tem um tutorial de como gerar json com php

DYNATABLE

No link tem uma explicação bem consistente, com exemplos práticos e usáveis

joseph_dev · 27 de janeiro de 2017

@DiF Isso mesmo... coloquei os valores fixos para ele entender mas deixei comentado pra ele fazer os calculos baseados nos campos e concatenar um por um... Ele disse no inicio que nao queria php, apenas html e js. A unica forma seria por esse caminho... Se fosse com php, desse jeito que você falou seria melhor e mais organizado eu acho...

E ai @Felipe Paz entendeu?

Felipe Paz · 30 de janeiro de 2017

@joseqfneto , não cheguei a testar mas pelo que vi é exatamente o que preciso. Não quero php porque como vai ser um arquivo disponibilizado entre os colegas, não vale a pena configurar rede, servidor, acesos e tudo mais só pra fazer uma vez ou outra algum cálculo. Assim que eu testar eu posto o resultado. Obrigado a vocês dois.