1
resposta

Duvida Sobre Outro Exercício

Galera, tenho esses Array's:

const coluna_um_valores = [1,6,11,16,21];
const coluna_um_valores = [2,7,12,17,22];

Esses valores devem ser passados pra duas colunas de uma tabela html. Existe uma forma "simples "de fazer isso ? Tentei usar o innerhtml de várias formas e não consegui. Ex da tabela:

Column 1Column 2
12
67
1112
1617
2122
1 resposta

Olá Gabriel, tudo bem com você?

Peço desculpas pela demora no retorno.

Uma forma simples de fazer isso utilizando JavaScript será utilizando o método insertRow() para criar uma nova linha na tabela e, em seguida, utilizar o método insertCell() para criar as células da tabela e preenchê-las com os valores dos arrays. Percorrendo os arrays através de um laço for.

Segue um exemplo de código:

<table id="minha-tabela">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

<style>
  #minha-tabela {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #ddd;
  }

  #minha-tabela th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
    font-weight: bold;
  }

  #minha-tabela td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
  }
</style>

<script>
const coluna_um_valores = [1,6,11,16,21];
const coluna_dois_valores = [2,7,12,17,22];

const tabela = document.getElementById("minha-tabela");

for(let i = 0; i < coluna_um_valores.length; i++) {
  const linha = tabela.insertRow();
  const celula1 = linha.insertCell();
  const celula2 = linha.insertCell();

  celula1.innerHTML = coluna_um_valores[i];
  celula2.innerHTML = coluna_dois_valores[i];
}
</script>

Resultado

Imagem contendo a exibição da tabela criada com o código anterior a essa imagem.

Espero ter lhe ajudado. Em caso de dúvidas estou à disposição.

Não hesite em voltar ao fórum para continuar aprendendo e interagindo com a comunidade.

Abraços e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software