Exibir Clientes em Tabela com JavaScript DOM

function exibeClientes(clientes) {

// BLOCO 1

// ÁREA ONDE SERÁ CONTIDA A TABELA

var areaPrincipal = document.querySelector('main')

// BLOCO 2

// CASO TENHA CRIADO A TABELA, THEAD E TBODY DIRETO NO HTML, IGNORE ESTA PARTE E PULE PARA O BLOCO 3...

var tabela = document.createElement('table')

var tabelaCabecalho = document.createElement('thead')

var tabelaCorpo = document.createElement('tbody')

var linhaCabecalho = document.createElement('tr')

var cabecalhoNome = document.createElement('th')

cabecalhoNome.textContent = 'Nome'

var cabecalhoIdade = document.createElement('th')

cabecalhoIdade.textContent = 'Idade'

var cabecalhoSalario = document.createElement('th')

cabecalhoSalario.textContent = 'Salário'

areaPrincipal.appendChild(tabela)

tabela.appendChild(tabelaCabecalho)

tabela.appendChild(tabelaCorpo)

tabelaCabecalho.appendChild(linhaCabecalho)

linhaCabecalho.appendChild(cabecalhoNome)

linhaCabecalho.appendChild(cabecalhoIdade)

linhaCabecalho.appendChild(cabecalhoSalario)

// BLOCO 3

// DEFINIÇÃO DOS ACUMULADORES DE IDADE E SALÁRIO

var mediaIdade = 0

var totalSalario = 0

// PERCORRE O ARRAY DE OBJETOS

for (var index = 0; index < clientes.length; index++) {

// OBSERVAÇÃO: ESTE PROCESSO NÃO PODE ESTAR FORA DO FOR

// CRIA AS LINHAS E TDS CORRESPONDENTES A CADA ITERAÇÃO

var linhaConteudo = document.createElement('tr')

var nomeConteudo = document.createElement('td')

var idadeConteudo = document.createElement('td')

var salarioConteudo = document.createElement('td')

// INSERE A LINHA DENTRO DO TBODY

tabelaCorpo.appendChild(linhaConteudo)

// RECUPERA OS DADOS E INSERE DENTRO DA TR (LINHA)

linhaConteudo.appendChild(nomeConteudo)

nomeConteudo.innerHTML = clientes[index].nome

linhaConteudo.appendChild(idadeConteudo)

idadeConteudo.textContent = clientes[index].idade

linhaConteudo.appendChild(salarioConteudo)

salarioConteudo.textContent = clientes[index].salario

// CÁLCULO DA MÉDIA DE IDADES E SOMA DOS SALÁRIOS

mediaIdade += clientes[index].idade

totalSalario += clientes[index].salario

}

// OBSERVAÇÃO: ESTA PARTE PRECISA ESTAR FORA DO FOR, POIS É UMA LINHA ÚNICA

// INSERÇÃO E CÁLCULO DA MÉDIA DA IDADE E SOMA DOS SALÁRIOS

var linhaCalculos = document.createElement('tr')

tabelaCorpo.appendChild(linhaCalculos)

var campoVazio = document.createElement('td')

linhaCalculos.appendChild(campoVazio)

var campoMedia = document.createElement('td')

linhaCalculos.appendChild(campoMedia)

campoMedia.textContent = 'Média das idades: ' + (mediaIdade / clientes.length) // QUANTIDADE DE ACORDO COM O NÚMERO DE CLIENTES (DINÂMICO)

var campoSalario = document.createElement('td')

linhaCalculos.appendChild(campoSalario)

campoSalario.textContent = 'Total dos salários: ' + totalSalario

}

// BLOCO TAL

// CHAMADA DA FUNÇÃO E PASSAGEM DO ARRAY DE OBJETOS

exibeClientes([

{ nome: 'Leandro', idade: 15, salario: 800 },

{ nome: 'Sandra', idade: 25, salario: 5000 }

])