2
I have a code in this jsFiddle which I changed, but now I’m having trouble passing it to an HTML file.
My code:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
th, td {
padding: 5px;
border:1px solid black;
}
.esconder {
display: none;
}
</style>
<script type="text/javascript">
var executa = function() {
var json = `'[{"trechoorigem":"CGH","trechodestino":"CWB","dataprocessamento":null,"sobrenomepassageiro":"TESTE","statusintegracao":"PENDENTE","tipoproduto":"AEREO","datasaida":1440069600000,"dataconclusaovenda":1438345534000,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1113,"dataemissaovenda":1438354800000,"fornecedor":"JJ","idproduto":22078,"nomepassageiro":"PASSAGEIRO","idsolicitacao":21192,"datacriacaovenda":1438345245000,"localizador":"5RAHNZ","datachegada":1440073380000,"localizadorgds":"false","postoatendimento":"Atendimento Maringá"},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":"Teste","statusintegracao":"SUCESSO","tipoproduto":"HOTEL","datasaida":null,"dataconclusaovenda":1439450269000,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1112,"dataemissaovenda":null,"fornecedor":"470","idproduto":9467,"nomepassageiro":"Passageiro","idsolicitacao":21408,"datacriacaovenda":1439450082000,"localizador":"ADF123","datachegada":null,"localizadorgds":null,"postoatendimento":"Atendimento Maringá"},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"AEREO","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1114,"dataemissaovenda":null,"fornecedor":null,"idproduto":20626,"nomepassageiro":null,"idsolicitacao":1,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null},{"trechoorigem":"CGH","trechodestino":"SDU","dataprocessamento":null,"sobrenomepassageiro":"TESTE","statusintegracao":"SUCESSO","tipoproduto":"AEREO","datasaida":1445519400000,"dataconclusaovenda":1445240405000,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1115,"dataemissaovenda":1445263200000,"fornecedor":"G3","idproduto":22622,"nomepassageiro":"PASSAGEIRO","idsolicitacao":22100,"datacriacaovenda":1445240352000,"localizador":"FLKH4R","datachegada":1445522880000,"localizadorgds":"false","postoatendimento":"Atendimento Maringá"},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"HOTEL","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1116,"dataemissaovenda":null,"fornecedor":null,"idproduto":9652,"nomepassageiro":null,"idsolicitacao":21970,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"HOTEL","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1117,"dataemissaovenda":null,"fornecedor":null,"idproduto":9653,"nomepassageiro":null,"idsolicitacao":21971,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null},{"trechoorigem":null,"trechodestino":null,"dataprocessamento":null,"sobrenomepassageiro":null,"statusintegracao":"EM PROCESSAMENTO","tipoproduto":"AEREO","datasaida":null,"dataconclusaovenda":null,"idpostoatendimento":null,"tipointegracao":"CONCLUSAO","confirmacao":null,"idintegracao":1118,"dataemissaovenda":null,"fornecedor":null,"idproduto":22531,"nomepassageiro":null,"idsolicitacao":21893,"datacriacaovenda":null,"localizador":null,"datachegada":null,"localizadorgds":null,"postoatendimento":null}]';`
var data = JSON.parse(json);
console.log(data);
var campos = Object.keys(data[0]);
/* CRIAR HTML E JUNTAR O <TR> À ARRAY */
var table = document.createElement('table');
var tr = document.createElement('tr');
campos.forEach(function (titulo) {
var th = document.createElement('th');
th.innerHTML = titulo;
tr.appendChild(th);
});
table.appendChild(tr);
data.map(function (pessoa) {
var tr = document.createElement('tr');
Object.keys(pessoa).forEach(function (valor) {
var td = document.createElement('td');
td.innerHTML = pessoa[valor];
tr.appendChild(td);
});
table.appendChild(tr);
pessoa.DOM = tr;
return pessoa;
});
document.body.appendChild(table);
/* PARTE DE FILTRAGENS */
var select = document.querySelector('select');
var input = document.querySelector('input');
var button = document.querySelector('button');
button.addEventListener('click', function () {
var prop = select.value;
var val = input.value;
data.forEach(function (linha) {
var valor = linha[prop];
if (valor && linha[prop].indexOf(val) < 0) linha.DOM.classList.add('esconder');
else linha.DOM.classList.remove('esconder');
});
});
}
</script>
<body>
<form action="testeste.html" method="post">
<select>
<option value="trechoorigem">Trecho Origem</option>
<option value="trechodestino">Trecho Destino</option>
<option value="dataprocessamento">Data Processamento</option>
<option value="statusintegracao">Status Integração</option>
<option value="tipoproduto">Tipo Produto</option>
<option value="datasaida">Data Saida</option>
<option value="dataconclusaovenda">Conclusão Venda</option>
<option value="idpostoatendimento">ID P.Atendimento</option>
<option value="tipointegracao">Tipo Integração</option>
<option value="confirmacao">Confirmação</option>
<option value="idintegracao">ID Integração</option>
<option value="dataemissaovenda">Data Emissao Venda</option>
<option value="fornecedor">Fornecedor</option>
<option value="idproduto">ID Produto</option>
<option value="nomepassageiro">Nome Passageiro</option>
<option value="idsolicitacao">ID Solicitação</option>
<option value="datacriacaovenda">Data Criação Venda</option>
<option value="datachegada">Data Chegada</option>
<option value="localizadorgds">Localizador GDS</option>
<option value="postoatendimento">Posto de Atendimento</option>
</select>
<input type="text" />
<button onclick="executa()">Pesquisar</button>
</form>
</body>
</html>
Any hint?
Place your script at the bottom of the page. The way the browser is going to run the script before rendering the elements...
– Emir Marques
jsfiddle contains autoload in the body, so I believe that’s all you have to do:
$(function(){ //aqui seu codigo... });– Ivan Ferrer
And in the case of the jsfiddle you put: you need to
ondomreadOnly– Ivan Ferrer
@Ivanferrer did not understand what you proposed, with the
ondomreadOnly. But it worked by putting the script at the end ofHTML.– Giovanni Bernini
I didn’t propose anything, I just commented that in jsfiddle that you published the option "ondomreadOnly" is enabled. The script will not work while your body is not loaded. So it does not work at first.
– Ivan Ferrer