lipelopeslage · September 18, 2015 12:10
diff --git a/tabela.html b/tabela.html
 <!doctype html>
 <html>
 	<head></head>
 	<body>
 		
 		<script>
 			// CRIAR UMA TABELA E ADICIONAR NO DOM
 			// criar tabela com o conteúdo de uma lista

 			var alunos = [{nome:'Deni', ra:'1420088-1'},
 			              {nome:'Dinora', ra:'1420089-1'},
 			              {nome:'Wagner', ra:'1120108-3'},
 			              {nome:'Marco', ra:'1420101-1'}];
 						
 			// iniciamos a estrutura fixa da tabela
 			var tabela = '<thead><tr><th>Nomes</th>';
 			tabela += '<th>RA</th></tr></thead><tbody>';
 			
 			
 			// criamos um <tr> pra cada registro novo implementado na tabela
 			for(var i = 0, total = alunos.length; i < total; i++){
 				tabela += '<tr><td class="aluno">'+alunos[i].nome+'</td>';
 				tabela += '<td class="ra" name="ra">'+alunos[i].ra+'</td></tr>';				
 			}
 			
 			//fechamos o corpo da tabela
 			tabela += '</tbody>';

 			//document.write(tabela); // MOSTRA NA TELA
 			
 			// VIRTUALMENTE NÃO HÁ DIFERENÇA ENTRE USAR DOCUMENT.WRITE
 			// E APPENDCHILD, A NÃO SER O CONTROLE DO LOCAL ONDE SERÁ INSERIDO


 			// criar uma tabea no documento
 			var tabelaDOM = document.createElement("table");
 			// o conteúdo dessa tabela será a criada acima, sem as tags <table>, </table>
 			tabelaDOM.innerHTML = tabela;

 			// adiciona ao documento/render tree
 			document.body.appendChild(tabelaDOM);
 			
 			// aplicar borda na tabela
 			tabelaDOM.setAttribute("border","1");
 			
 			// deixar as celulas dos alunos com fundo azul
 			var listaAlunos = tabelaDOM.querySelectorAll(".aluno");
 			var i = 0;
 			while(i < listaAlunos.length){
 				listaAlunos[i].style.backgroundColor = "blue";					
 				i++;
 			}
 			
 			// deixar as celulas dos RAs com fundo amarelo
 			i = 0; // zera contador, para reutilização
 			var listaRAs = tabelaDOM.querySelectorAll("td[name=ra]"); // seletor de atributo
 																	  // veja na String da tabela:
 																	  // name="ra"
 			while(i < listaRAs.length){
 				listaRAs[i].style.backgroundColor = "yellow";				
 				i++;
 			}
 		</script>
 	</body>
 </html>
	<!doctype html>
	<html>
	<head></head>
	<body>

	<script>
	// CRIAR UMA TABELA E ADICIONAR NO DOM
	// criar tabela com o conteúdo de uma lista

	var alunos = [{nome:'Deni', ra:'1420088-1'},
	{nome:'Dinora', ra:'1420089-1'},
	{nome:'Wagner', ra:'1120108-3'},
	{nome:'Marco', ra:'1420101-1'}];

	// iniciamos a estrutura fixa da tabela
	var tabela = '<thead><tr><th>Nomes</th>';
	tabela += '<th>RA</th></tr></thead><tbody>';


	// criamos um <tr> pra cada registro novo implementado na tabela
	for(var i = 0, total = alunos.length; i < total; i++){
	tabela += '<tr><td class="aluno">'+alunos[i].nome+'</td>';
	tabela += '<td class="ra" name="ra">'+alunos[i].ra+'</td></tr>';
	}

	//fechamos o corpo da tabela
	tabela += '</tbody>';

	//document.write(tabela); // MOSTRA NA TELA

	// VIRTUALMENTE NÃO HÁ DIFERENÇA ENTRE USAR DOCUMENT.WRITE
	// E APPENDCHILD, A NÃO SER O CONTROLE DO LOCAL ONDE SERÁ INSERIDO


	// criar uma tabea no documento
	var tabelaDOM = document.createElement("table");
	// o conteúdo dessa tabela será a criada acima, sem as tags <table>, </table>
	tabelaDOM.innerHTML = tabela;

	// adiciona ao documento/render tree
	document.body.appendChild(tabelaDOM);

	// aplicar borda na tabela
	tabelaDOM.setAttribute("border","1");

	// deixar as celulas dos alunos com fundo azul
	var listaAlunos = tabelaDOM.querySelectorAll(".aluno");
	var i = 0;
	while(i < listaAlunos.length){
	listaAlunos[i].style.backgroundColor = "blue";
	i++;
	}

	// deixar as celulas dos RAs com fundo amarelo
	i = 0; // zera contador, para reutilização
	var listaRAs = tabelaDOM.querySelectorAll("td[name=ra]"); // seletor de atributo
	// veja na String da tabela:
	// name="ra"
	while(i < listaRAs.length){
	listaRAs[i].style.backgroundColor = "yellow";
	i++;
	}
	</script>
	</body>
	</html>