Como passar dados de um array para uma tabela em html

DiegoMB · Setembro 17, 2016

Olá, estou com dificuldades na hora de manipular o array, no caso, fazer ele preencher uma tabela em html.

Segue as informações referente ao exercício que tenho que desenvolver.

A cada novo carro adicionado, por meio do botão cadastrar, a tabela apresentada deve ser alimentada com os dados digitados no formulário. Após desenvolver a página de acordo com o pedido, crie um array e inclua as seguintes funções de manipulação, que devem ser chamadas por meio de novos botões a serem adicionados na página: - incluir carro (armazena carro no array); - buscar carro (através da placa); - remover carro (através da placa, que elimina a informação do array).

Página Html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Atividade Javascript 3 - Cadastro de veículos</title>
<link rel="stylesheet" type="text/css" href="estilo.css">
<script type="text/javascript" src="funcao.js"></script>
</head>
<body>
<div id="principal">

	<div class="formulario">
		<form method="post" >
			<fieldset>
				<legend>Cadastro de veículo</legend>
				<label for="placa">
					<span>Placa:</span>
					<input type="text" name="placa" id="placa" />
				</label>
				<label for="ano">
					<span>Ano:</span>
					<input type="text" name="ano" id="ano" />
				</label>
				<label for="fabricante">
					<span>Fabricante:</span>
					<input type="text" name="fabricante" id="fabricante" />
				</label>
				<label for="modelo">
					<span>Modelo:</span>
					<input type="text" name="modelo" id="modelo" />
				</label>
				<div class="botoes">
					<button type="button" onclick="cadastrar()">Cadastrar</button>
					<button type="button" name="buscar">Buscar</button>
					<button type="button" name="remover">Remover</button>
				</div>
			</fieldset>
		</form>
	</div>
	
	<div class="tabela">
		<table>
			<thead>
				<tr>
					<td>Placa</td>
					<td>Ano</td>
					<td>Fabricante</td>
					<td>Modelo</td>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>XXX - 0000</td>
					<td>2000</td>
					<td>Ford</td>
					<td>Ka</td>
				</tr>
			</tbody>
		</table>
	</div>
	
</div>
</body>
</html>

Javascript

function cadastrar(){
	
	var placa = document.getElementById("placa").value;
	var ano = document.getElementById("ano").value;
	var fabricante = document.getElementById("fabricante").value;
	var modelo = document.getElementById("modelo").value;
	
	
}

//Teste

var carros = [];
		
	carros[0] =	{
		placa:"ARE-4376", 
		ano:"2010", 
		fabricante:"Ford", 
		modelo: "Ka"
	};
		
	carros[1] = {
		placa:"RTY-3209", 
		ano:"2009", 
		fabricante:"Chevrolet", 
		modelo: "Corsa"
	};
	
	carros[2] = {
		placa:"GHJ-0654", 
		ano:"2002", 
		fabricante:"Chevrolet", 
		modelo: "Celta"
	};	
	
	
	for(i=0; i < carros.length; i++){
		
      	//adicionar os dados na tabela que está na página html
		//document.writeln(carros[i].placa +" - "+ carros[i].ano +" - "+ carros[i].fabricante +" - "+ carros[i].modelo +"<br>");
	
	}

ygor.anjos · Setembro 19, 2016

Bom dia, pesquise sobre Jquery, ele tem a função que você precisa para colocar elementos no html.

DiegoMB · Setembro 22, 2016

Agradeço pela resposta mas tenho que desenvolver usando apenas javascript

DaniloRDOL · Outubro 26, 2016

antes do for, vamos criar duas variaveis, uma table e outra tbody.

var table = document.getElementByTagName("table")[0];// sugestão, coloque um id na tabela para usar getElementById.
var tbody = table.getElementByTagName("tbody")[0];

// limpar tbody

tbody.innerHTML="";

//adicionar as linha na tabela

for(var i=0; i< carros.length; i++){
         tbody.innerHTML += "<tr><td>"+carros[i].placa+"</td><td>"+carros[i].ano+"</td><td>"+carros[i].fabricante+"</td><td>"+carros[i].modelo+"</td></tr>";                          
}
                              
// ou se preferir
                              
for(var i=0, carro; carro = carros[i]; i++){
         tbody.innerHTML += "<tr><td>"+carro.placa+"</td><td>"+carro.ano+"</td><td>"+carro.fabricante+"</td><td>"+carro.modelo+"</td></tr>";                          
}   
                              
// com javascript ES6(navegadores atuais menos IE) pode ser feito assim também
                              
for(var i=0, carro; carro = carros[i]; i++){
         tbody.innerHTML += `<tr><td>${carro.placa}</td><td>${carro.ano}</td><td>${carro.fabricante}</td><td>${carro.modelo}</td></tr>`;                          
}

Antes de iniciar o for, pode ver que tbody foi limpo, assim evita duplicação.

Espero ter ajudado.

ygor.anjos · Setembro 23, 2016

Jquery é uma evolução do JavaScript, tudo que você faz com Jquery você faz com javaScript

Entrar

Como passar dados de um array para uma tabela em html

Pergunta

DiegoMB

Link para o comentário

Compartilhar em outros sites

4 respostass a esta questão

Posts Recomendados

ygor.anjos

Link para o comentário

Compartilhar em outros sites

DiegoMB

Link para o comentário

Compartilhar em outros sites

DaniloRDOL

Link para o comentário

Compartilhar em outros sites

ygor.anjos

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades