Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Giovani Tonel

Como alimentar o resultado de um javascrit em um table class do html

Recommended Posts

Olá pessoal,

gostaria de um ajudinha, pois sou quase um leigo no assunto de programação.Basicamente gostaria de usar no meu código html , um resultado de um script. Gostaria de alimentar os valores em uma tabela com o comando <td class="data">counter_N_range1</td>, sendo counter_N_range1, counter_N_range2, etc as variáveis resultantes do meu script as quais eu gostaria de plotar em um gráfico. Mas da forma como coloquei não funciona. Alguém poderia me ajudar nisso?

 

 

 

Script

<script >
	

	function loadData1() {
	// variable for the data point
		var p1;
		var p2;
		var p3;
		var p4;
		var p5;	
		var p6;			
		var factor1;
	
	
	
		$.getJSON('https://www.windguru.cz/int/wgsapi.php?q=station_data&id_station=XXX&password=XXXX&from=-1hour&to=now&avg_minutes=0', function(data1) {
		
		// get the data point
		p1 = data1.wind_avg;
		p2 = data1.wind_max;
		p3 = data1.wind_min;
		p4 = data1.wind_direction;
		p5= data1.temperature;
		p6= data1.datetime;
		
		// factor to convert knots to km/h
		factor1=1.852;
		
		if (p1)
		{
			p_kmh =math.multiply(p1,factor1);
			p2_kmh =math.multiply(p2,factor1);
			//p_kmh = p1*factor1;
			//p2_kmh = p2*factor1;
			
		}
		

		
		var counter_NNE_range1= 0;	var counter_NNE_range2= 0;	var counter_NNE_range3= 0;	var counter_NNE_range4= 0;
		var counter_NE_range1= 0;	var counter_NE_range2= 0;	var counter_NE_range3= 0;	var counter_NE_range4= 0;
		var counter_ENE_range1= 0;	var counter_ENE_range2= 0;	var counter_ENE_range3= 0;	var counter_ENE_range4= 0;
		var counter_E_range1= 0;	var counter_E_range2= 0;	var counter_E_range3= 0;	var counter_E_range4= 0;
		var counter_ESE_range1= 0;	var counter_ESE_range2= 0;	var counter_ESE_range3= 0;	var counter_ESE_range4= 0;
		var counter_SE_range1= 0;	var counter_SE_range2= 0;	var counter_SE_range3= 0;	var counter_SE_range4= 0;
		var counter_SSE_range1= 0;	var counter_SSE_range2= 0;	var counter_SSE_range3= 0;	var counter_SSE_range4= 0;
		var counter_S_range1= 0;	var counter_S_range2= 0;	var counter_S_range3= 0;	var counter_S_range4= 0;
		var counter_SSW_range1= 0;	var counter_SSW_range2= 0;	var counter_SSW_range3= 0;	var counter_SSW_range4= 0;
		var counter_SW_range1= 0;	var counter_SW_range2= 0;	var counter_SW_range3= 0;	var counter_SW_range4= 0;
		var counter_WSW_range1= 0;	var counter_WSW_range2= 0;	var counter_WSW_range3= 0;	var counter_WSW_range4= 0;
		var counter_W_range1= 0;	var counter_W_range2= 0;	var counter_W_range3= 0;	var counter_W_range4= 0;
		var counter_WNW_range1= 0;	var counter_WNW_range2= 0;	var counter_WNW_range3= 0;	var counter_WNW_range4= 0;
		var counter_NW_range1= 0;	var counter_NW_range2= 0;	var counter_NW_range3= 0;	var counter_NW_range4= 0;
		var counter_NNW_range1= 0;	var counter_NNW_range2= 0;	var counter_NNW_range3= 0;	var counter_NNW_range4= 0;
		var counter_N_range1= 0;	var counter_N_range2= 0;	var counter_N_range3= 0;	var counter_N_range4= 0;

		

for (i = 0, len = p4.length; i < len; i++) { 		
		switch (true)		{  
		case (348.75 <= p4[i] && p4[i] < 11.25):/* Direction: Norte (N)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
				case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_N_range1 += 1;  break;
				case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_N_range2 += 1;  break;
				case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_N_range3 += 1;  break;
				case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_N_range4 += 1;  break;
				}
		break;
		case (11.25 <= p4[i] && p4[i] < 33.75):/* Direction: Norte-Nordeste (NNE)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_NNE_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_NNE_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_NNE_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_NNE_range4 += 1;  break;
				}
		break;
		case (33.75 <= p4[i] && p4[i] < 56.25):/* Direction: Nordeste (NE)*/ 			
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_NE_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_NE_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_NE_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_NE_range4 += 1;  break;
				}
		break;
		case (56.25 <= p4[i] && p4[i] < 78.75):/* Direction: Leste-Nordeste (ENE)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_ENE_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_ENE_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_ENE_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_ENE_range4 += 1;  break;
				}
		break;
		case (78.75 <= p4[i] && p4[i] < 101.25):/* Direction: Leste (E)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_E_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_E_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_E_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_E_range4 += 1;  break;
				}
		break;
		case (101.25 <= p4[i] && p4[i] < 123.75):/* Direction: Leste-Sudeste (ESE)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_ESE_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_ESE_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_ESE_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_ESE_range4 += 1;  break;
				}
		break;
		case (123.75 <= p4[i] && p4[i] < 146.25):/* Direction: Sudeste (SE)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_SE_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_SE_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_SE_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_SE_range4 += 1;  break;
				}
		break;
		case (146.25 <= p4[i] && p4[i] < 168.75):/* Direction: Sul-Sudeste (SSE)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_SSE_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_SSE_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_SSE_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_SSE_range4 += 1;  break;
				}
		break;
		case (168.75 <= p4[i] && p4[i] < 191.25):/* Direction: Sul (S)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_S_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_S_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_S_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_S_range4 += 1;  break;
				}		
		break;
		case (191.25 <= p4[i] && p4[i] < 213.75):/* Direction: Sul-Sudoeste (SSW)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_SSW_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_SSW_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_SSW_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_SSW_range4 += 1;  break;
				}
		break;
		case (213.75 <= p4[i] && p4[i] < 236.25):/* Direction: Sudoeste (SW)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_SW_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_SW_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_SW_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_SW_range4 += 1;  break;
				}
		break;
		case (236.25 <= p4[i] && p4[i] < 258.75):/* Direction: Oeste-Sudoeste (WSW)*/ 			
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_WSW_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_WSW_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_WSW_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_WSW_range4 += 1;  break;
				}
		break;
		case (258.75 <= p4[i] && p4[i] < 281.25):/* Direction: Oeste (W)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_W_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_W_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_W_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_W_range4 += 1;  break;
				}
		break;
		case (281.25 <= p4[i] && p4[i] < 303.75):/* Direction: Oeste-Noroeste (WNW)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_WNW_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_WNW_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_WNW_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_WNW_range4 += 1;  break;
				}		
		break;
		case (303.75 <= p4[i] && p4[i] < 326.25):/* Direction: Noroeste (NW)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_NW_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_NW_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_NW_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_NW_range4 += 1;  break;
				}
		break;
		case (326.25 <= p4[i] && p4[i] < 348.75):/* Direction: Norte-Noroeste (NNW)*/ 
			switch (true)		{ 
			// Wind Speed Ranges Count
			case (0 <= p_kmh[i] && p_kmh[i] < 5):/* Condition: Calm */ counter_NNW_range1 += 1;  break;
			case (5 <= p_kmh[i] && p_kmh[i] < 15):/* Condition: Moderate */ counter_NNW_range2 += 1;  break;
			case (25 <= p_kmh[i] && p_kmh[i] < 40):/* Condition: Strong */ counter_NNW_range3 += 1;  break;
			case (40 <= p_kmh[i] ):/* Condition: Very Strong */ counter_NNW_range4 += 1;  break;
				}
		break;
		
		}
		}
		
			
	});
	
	
}

	

</script>

Código html

<div id="container" style="min-width: 420px; max-width: 600px; height: 400px; margin: 0 auto"></div>
<!-- White line -->
<div style="display:true">
  <!-- White line -->
<!-- Fonte: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/polar-wind-rose/-->

loadData1();
  <table id="freq" border="0" cellspacing="0" cellpadding="0">
    <tr nowrap bgcolor="#CCCCFF">
      <th colspan="5" class="hdr">Table of Frequencies (percent)</th>
      <!-- White line -->
    </tr>
    <tr nowrap bgcolor="#CCCCFF">
      <th class="freq">Direction</th>
      <th class="freq">0 - 5 km/h </th>
      <th class="freq">5 - 20 km/h </th>
      <th class="freq">20 - 30 km/h </th>
      <th class="freq">> 30 km/h </th>

    </tr>
    <tr nowrap>
      <td class="dir">N</td>
      <td class="data">counter_N_range1</td>
      <td class="data">counter_N_range2</td>
      <td class="data">counter_N_range3</td>
      <td class="data">counter_N_range4</td>

    </tr>
    <tr nowrap bgcolor="#DDDDDD">
      <td class="dir">NNE</td>
      <td class="data">counter_NNE_range1</td>
      <td class="data">counter_NNE_range2</td>
      <td class="data">counter_NNE_range3</td>
      <td class="data">counter_NNE_range4</td>
</tr>
...
</table>
</div>

 

 

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por luiz monteiro
      Olá.
      Estou atualizando meu conhecimento com Front-End e me deparei com o seguinte problema.
      Criei um sistema para fazer o upload de imagens e alguns campos text.
      Algo bem simples para depois começar a estudar javascript para mostrar a miniatura....
      Mas quando saio do navegador Chrome ou da aba por mais de 3 minutos, ao retornar o navegador as vezes atualiza ou nem chega atualizar mas limpa os campos.
      Estou usando um Smart Motorola com Android, mas um amigo testou no iPhone e acontece a mesma coisa.
      Gostaria de saber se há como usar javascript para evitar isso?
      Agradeço desde já.

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Uploader</title>
      </head>
      <body>
          <form action="?" method="post" enctype="multipart/form-data">
              <br><br>
              <div>selecione a imagem 1</div>
              <input type="file" name="foto1" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem1">
              
              <br><br>
              <input type="file" name="foto2" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem2">
              
              <br><br>

              <input type="file" name="foto3" accept="image/*">
              <br><br>
              <input type="text" name="nome_imagem3">
              
              <br><br>
              <input type="submit" value="Enviar">
              <br><br>
          </form>
      <?php
      if ($_SERVER['REQUEST_METHOD'] == 'POST')
      {
          vardump ($_FILES);
      }
      ?>
      </body>
      </html>
       
       
       
    • Por belann
      Olá!
       
      Estou usando o nextjs versão 15.2.3 e criei uma navbar que quando é carregado o programa aparece com a home, mas na hora de clicar na página produtos desaparece a navbar.
      A navbar esta sendo chamada no layout.tsx estou usando typescript
      e fica dessa forma
      <div>           <Navbar/>             <main>{children}</main>             </div>  
    • Por violin101
      Caros amigos, saudações.

      Estou com uma dúvida, referente cálculo de valores em tempo real.

      Tenho uma rotina, que faz o cálculo, o problema é mostrar o resultado.

      Quero mostrar o RESULTADO assim: 0,00  ou  0.00

      Abaixo posto o código.
      jQuery('input').on('keyup',function(){ //Remover ponto e trocar a virgula por ponto var m = document.getElementById("pgRest").value; while (m.indexOf(".") >= 0) { m = m.replace(".", ""); } m = m.replace(",","."); //Remover ponto e trocar a virgula por ponto var j = document.getElementById("pgDsct").value; while (j.indexOf(".") >= 0) { j = j.replace(".", ""); } j = j.replace(",","."); m = parseFloat(jQuery('#pgRest').val() != '' ? jQuery('#pgRest').val() : 0); j = parseFloat(jQuery('#pgDsct').val() != '' ? jQuery('#pgDsct').val() : 0); //Mostra o Resultado em Tempo Real jQuery('#pgTroco').val(m - j); <<=== aqui estou errando })  
       
      Grato,
       
      Cesar
       
       
    • Por violin101
      Caro amigos, saudações.

      Tenho uma tabela escrita em JS que funciona corretamente.
       
      Minha dúvida:
      - como devo fazer para quando a Tabela HTML estiver vazia, exibir o LOGO da Empresa ?

      Abaixo posto o script:
      document.addEventListener( 'keydown', evt => { if (!evt.ctrlKey || evt.key !== 'i' ) return;// Não é Ctrl+A, portanto interrompemos o script evt.preventDefault(); //Chama a Função Calcular Qtde X Valor Venda calcvda(); var idProdutos = document.getElementById("idProdutos").value; var descricao = document.getElementById("descricao").value; var prd_unid = document.getElementById("prd_unid").value; var estoque_atual = document.getElementById("estoque_atual").value; var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotals = document.getElementById("vlrtotal").value; var vlrtotal = vlrtotals.toLocaleString('pt-br', {minimumFractionDigits: 2}); if(validarConsumo(estoque_atual)){ //Chama a Modal com Alerta. $("#modal_qtdemaior").modal(); } else { if(qtde == "" || vlrunit == "" || vlrtotal == ""){ //Chama a Modal com Alerta. $("#modal_quantidade").modal(); } else { //Monta a Tabela com os Itens html = "<tr style='font-size:13px;'>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='id_prds[]' value='"+idProdutos+"'>"+idProdutos+"</td>"; html += "<td width='47%' height='10'>"+ "<input type='hidden' name='descricao[]' value='"+descricao+"'>"+descricao+ "<input type='hidden' name='esp[]' value='"+prd_unid+"'> - ESP:"+prd_unid+ "<input type='hidden' name='estoq[]' value='"+estoque_atual+"'></td>"; html += "<td width='10%' height='10' style='text-align:center;'>"+ "<input type='hidden' name='qtde[]' value='"+qtde+"'>"+qtde+"</td>"; html += "<td width='12%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrunit[]' value='"+vlrunit+"'>"+vlrunit+"</td>"; html += "<td width='14%' height='10' style='text-align:right;'>"+ "<input type='hidden' name='vlrtotal[]' value='"+vlrtotal+"'>"+vlrtotal+"</td>"; html += "<td width='12%' height='10' style='text-align:center;'>"+ "<button type='button' class='btn btn-uvas btn-remove-produto' style='margin-right:1%; padding:1px 3px; font-size:12px;' title='Remover Item da Lista'>"+ "<span class='fa fa-minus' style='font-size:12px;'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); //Função para Somar os Itens do Lançamento somar(); $("#idProdutos").val(null); $("#descricao").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); $("#idProdutos").focus(); //Se INCLUIR NOVO produto - Limpa a Forma de Pagamento $("#pgSoma").val(null); $("#pgRest").val(null); $("#pgDsct").val(null); $("#pgTroco").val(null); $("#tbpagar tbody").empty(); }//Fim do IF-qtde }//Fim do Validar Consumo });//Fim da Função btn-agregar  
      Grato,

      Cesar
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.