Construção de Formulário HTML dinâmico com diversos elementos
23/01/2019
0
<!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><%= title %></title>
<link rel="stylesheet" href="./style/style_noticias.css">
!--
<script type="text/javascript" src="../../../public/js/script_oportunidades.js"></script>
-->
</head>
<body id="corpo">
<script type="text/javascript" src="js/script_oportunidades.js"></script>
</body onload="construtor(oportunidades)">
</html>
Acima o código do index, que no onload chamo a função construtor(oportunidades).
Oportunidades é um objeto Json resultante da consulta ao banco de dados na tabela de oportunidades de emprego/estágio.
Rendenizo o index passando como parâmetro a view, titulo e o objeto Json (oportunidades).
A montagem da página é 100% dinâmica quebrada em seções com dados do tipo:
Requisitos, benefícios, qualificação desejável, conhecimentos diferenciados e observações.
Essas quebras são realizadas dentro de um laço while.
Abaixo o arquivo javascript
function construtor(obj){
criaEstrutura(obj);
}
function criaEstrutura(obj){
// Cria o cabeçalho e escreve OPORTUNIDADES
var header = document.createElement("header");
header.setAttribute("id", "cabecalho");
header.innerHTML = "<h1>Oportunidades</h1>";
document.getElementById("corpo").appendChild(header);
var codigo_oportunidade = 0;
var codigo_secao = 0;
for(i=0; i<obj.length; i++) {
var section = document.createElement("section");
section.setAttribute("id", "nro_"+numero);
var codigo_oportunidade = obj[i].opt_codigo;
// enquanto for a mesma oferta de oportunidade percorro o arquivo Estágio x Emprego
while (codigo_oportunidade == obj[i].opt_codigo) {
// escreve o tipo de oportunidade - estagio x emprego
var p = document.createElement("p");
p.setAttribute("id", "sub-dois");
p.innerHTML = "<h2>" + obj[i].tpo_descricao + "</h2>"
// insere o parágrafo na seção
section.appendChild(p);
// escreve título Função
p.setAttribute("id", "sub-dois");
p.innerHTML = "<h2> Função </h2>"
// escreve a descricao da função
var p = document.createElement("p");
p.setAttribute("id", "sub-tres");
p.innerHTML = "<h3>" + obj[i].tpo_descricao + "</h3>"
// insere outro parágrafo na seção
section.appendChild(p);
// codigo_oportunidade = obj.opt_codigo;
// enquanto for a mesma seção
codigo_secao = obj[i].sec_codigo;
while (codigo_secao == obj[i].sec_codigo) {
// escreve o tipo de oportunidade - estagio x emprego
var p = document.createElement("p");
p.setAttribute("id", "sub-quatro");
p.innerHTML = "<h4>" + obj[i].tpo_descricao + "</h4>";
// insere outro parágrafo na seção
section.appendChild(p);
}
}
}
header.appendChild(section);
document.body.appendChild(header);
}
<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><%= title %></title>
<link rel="stylesheet" href="./style/style_noticias.css">
!--
<script type="text/javascript" src="../../../public/js/script_oportunidades.js"></script>
-->
</head>
<body id="corpo">
<script type="text/javascript" src="js/script_oportunidades.js"></script>
</body onload="construtor(oportunidades)">
</html>
Acima o código do index, que no onload chamo a função construtor(oportunidades).
Oportunidades é um objeto Json resultante da consulta ao banco de dados na tabela de oportunidades de emprego/estágio.
Rendenizo o index passando como parâmetro a view, titulo e o objeto Json (oportunidades).
A montagem da página é 100% dinâmica quebrada em seções com dados do tipo:
Requisitos, benefícios, qualificação desejável, conhecimentos diferenciados e observações.
Essas quebras são realizadas dentro de um laço while.
Abaixo o arquivo javascript
function construtor(obj){
criaEstrutura(obj);
}
function criaEstrutura(obj){
// Cria o cabeçalho e escreve OPORTUNIDADES
var header = document.createElement("header");
header.setAttribute("id", "cabecalho");
header.innerHTML = "<h1>Oportunidades</h1>";
document.getElementById("corpo").appendChild(header);
var codigo_oportunidade = 0;
var codigo_secao = 0;
for(i=0; i<obj.length; i++) {
var section = document.createElement("section");
section.setAttribute("id", "nro_"+numero);
var codigo_oportunidade = obj[i].opt_codigo;
// enquanto for a mesma oferta de oportunidade percorro o arquivo Estágio x Emprego
while (codigo_oportunidade == obj[i].opt_codigo) {
// escreve o tipo de oportunidade - estagio x emprego
var p = document.createElement("p");
p.setAttribute("id", "sub-dois");
p.innerHTML = "<h2>" + obj[i].tpo_descricao + "</h2>"
// insere o parágrafo na seção
section.appendChild(p);
// escreve título Função
p.setAttribute("id", "sub-dois");
p.innerHTML = "<h2> Função </h2>"
// escreve a descricao da função
var p = document.createElement("p");
p.setAttribute("id", "sub-tres");
p.innerHTML = "<h3>" + obj[i].tpo_descricao + "</h3>"
// insere outro parágrafo na seção
section.appendChild(p);
// codigo_oportunidade = obj.opt_codigo;
// enquanto for a mesma seção
codigo_secao = obj[i].sec_codigo;
while (codigo_secao == obj[i].sec_codigo) {
// escreve o tipo de oportunidade - estagio x emprego
var p = document.createElement("p");
p.setAttribute("id", "sub-quatro");
p.innerHTML = "<h4>" + obj[i].tpo_descricao + "</h4>";
// insere outro parágrafo na seção
section.appendChild(p);
}
}
}
header.appendChild(section);
document.body.appendChild(header);
}
Antônio Neto
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)