-2
Good evening, people! I have a problem with my javascript code, it should create a table with the fields I fill... But when I press to add, it doesn’t add the values in the table... If anyone can help me to solve this problem, I’d appreciate it. If there’s any more explanation I’m willing to explain!!
Below is the code in HTML and JAVASCRIPT.
HTML CODE
<body>
//formação dos campos da tabela//
<form action="" class="tabela">
<label id="etiqueta" for="equipamento">Equipamento</label>
<input required type="text" name="equipamento" placeholder="Digite seu Equipamento">
<br>
<label for="modelo">Modelo</label>
<input required type="text" name="modelo" placeholder="Digite sua Modelo">
<br>
<label for="data" >Data</label>
<input required type="date" name="data" placeholder="Digite a Data da retira">
<br>
<label for="chamado" >Numero do chamado</label>
<input required type="number" name="chamado" placeholder="Digite o chamado referente o equepamento ">
<br>
<label for="modelo">Quantidade de Saída</label>
<input required type="number" name="quantidade" placeholder="Digite a Quantidade">
<br>
<button id="adicionar_dados">Adicionar Linha</button>
</form>
<div class="alerta"></div>
<hr>
//inicio da tabela//
<table border="2px solid" >
<thead>
<tr>
<td>Equipamento</td>
<td>Modelo</td>
<td>Data</td>
<td>Numero do chamado</td>
<td>Quantidade de Saída</td>
</tr>
</thead>
<tbody >
</tbody>
<hr>
</table>
Javascript code:
// funções botão
botao_excluir.addEventListener('click',function(){
var tr = this.parentNode;
var tb = tr.parentNode;
tb.removeChild(tr);
});
botao_editar.addEventListener('click', function(){
var tr = this.parentNode;
for(var i =0; i< tr.children.length -2; i++){
var td = tr.children[i];
if(td.children[0].tagName = 'textarea')
td.children[0].disabled = false;
}
});
inputEquipamento.setAttribute('disabled',true);
inputModelo.setAttribute('disabled',true);
inputData.setAttribute('disabled',true);
inputChamado.setAttribute('disabled',true);
inputQuantidade.setAttribute('disabled',true);
//variaveis
var botao_adicionar = document.querySelector("#adicionar_dados");
var campo_equipamento = document.querySelector("input[name='equipamento']");
var campo_modelo = document.querySelector("input[name='modelo']");
var campo_data = document.querySelector("input[name='data']");
var campo_chamado = document.querySelector("input[name='chamado']");
var campo_quantidade = document.querySelector("input[name='quantidade']");
var corpo_tabela = document.querySelector("tbody");
var contTab=0;
//funções tabela
function TabelaDinamica(equipamento,modelo,data,chamado,quantidade)
{
this.equipamento=equipamento;
this.modelo=modelo;
this.data=data;
this.chamado=chamado;
this.quantidade=quantidade;
this.mostrar_dados=function()
{
console.log(" equipamento é"+this.equipamento+
"o modelo é"+this.modelo+
"a data é "+this.data+
"o chamado"+this.chamado+
"e a quantidade"+this.quantidade)
}
this.criar_linha_tabela = function()
{
var linha = document.createElement("tr");
var campo_equipamento = document.createElement("td");
var campo_modelo = document.createElement("td");
var campo_data = document.createElement("td");
var campo_chamado = document.createElement("td");
var campo_quantidade = document.createElement("td");
var inputEquipamento = document.createElement("textarea");
var inputModelo = document.createElement("textarea");
var inputData = document.createElement("textarea");
var inputChamado = document.createElement("textarea");
var inputQuantidade = document.createElement("textarea");
inputEquipamento.setAttribute('disabled',true);
inputModelo.setAttribute('disabled',true);
inputData.setAttribute('disabled',true);
inputChamado.setAttribute('disabled',true);
inputQuantidade.setAttribute('disabled',true);
var texto_equipamento = document.createTextNode(this.equipamento);
var texto_modelo = document.createTextNode(this.modelo);
var texto_data = document.createTextNode(this.data);
var texto_chamado = document.createTextNode(this.chamado);
var texto_quantidade = document.createTextNode(this.quantidade);
inputEquipamento.appendChild(texto_equipamento);
inputModelo.appendChild(texto_modelo);
inputData.appendChild(texto_data);
inputChamado.appendChild(texto_chamado);
inputQuantidade.appendChild(texto_quantidade);
campo_quantidade.appendChild(inputQuantidade);
campo_chamado.appendChild(inputChamado);
campo_data.appendChild(inputData);
campo_modelo.appendChild(inputModelo);
campo_equipamento.appendChild(inputEquipamento);
var botao_editar = document.createElement("input");
botao_editar.setAttribute('type','submit');
botao_editar.setAttribute('value','editar');
var botao_excluir = document.createElement("input");
botao_excluir.setAttribute('type','submit');
botao_excluir.setAttribute('value','excluir');
linha.appendChild(campo_equipamento);
linha.appendChild(campo_modelo);
linha.appendChild(campo_data);
linha.appendChild(campo_chamado);
linha.appendChild(campo_quantidade);
linha.appendChild(botao_editar);
linha.appendChild(botao_excluir);
corpo_tabela.appendChild(linha);
botao_excluir.addEventListener('click',function(){
var tr = this.parentNode;
var tb = tr.parentNode;
tb.removeChild(tr);
});
//função botão
botao_editar.addEventListener('click', function(){
var tr = this.parentNode;
for(var i =0; i< tr.children.length -2; i++){
var td = tr.children[i];
if(td.children[0].tagName = 'textarea')
td.children[0].disabled = false;
}
});
}
};
function adicionar_dados(event){
event.preventDefault();
nova_tabelaDinamica = new TabelaDinamica(campo_equipamento.value,campo_modelo.value,campo_data.value,campo_chamado.value,campo_quantidade.value);
nova_tabelaDinamica.criar_linha_tabela();
nova_tabelaDinamica.mostrar_dados();
};
botao_adicionar.addEventListener('click',adicionar_dados);
Your basic code isn’t even working.
– Sam