Jump to content
Fórum Script Brasil
  • 0

Como passar dados de um array para uma tabela em html


DiegoMB

Question

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>");
	
	}

 

Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Cloud Computing


  • Forum Statistics

    • Total Topics
      148719
    • Total Posts
      644508
×
×
  • Create New...