0

Eu tenho um código no qual tem o objetivo de gerar alguns elementos <td> (células) na tabela e se a linha onde se encontra os elementos <td> atingir uma determinada quantidade de elementos <td> (no qual é 10) é criado uma nova linha com o elemento tr e insere o restante dos elementos <td> nessa nova linha, caso atigir novamente 10 elementos <td> é repetido novamente tudo de novo:

let table = document.querySelector('table');

// Criar inicialmente o elemento tr.
let tr = document.createElement('tr');

table.appendChild(tr);

// Gerar 20 elementos td para extrapolar a quantidade máxima.
for (let t = 1; t <= 20; t ++) {
    let td = document.createElement('td');

    // Inserir o conteúdo do incremento no td.
    td.innerHTML = t;

    let trChild = document.querySelector('tr');

    // Verificar se o número de filhos é maior do que 10.
    // Se sim criar um novo elemento tr e inserir os td.
    if (trChild.childElementCount > 10) {
        tr = document.createElement('tr');
        tr.appendChild(td);
    }

    else {
        // Se não continuar no tr atual.
        tr.appendChild(td);
    }
}
table, td {
    border: 1px solid #505050;
    border-collapse: collapse;
    padding: 10px;
    font-family: sans-serif;
    font-size: 1.1em;
}
<table>

</table>

Mas vejo que a minha lógica está meio que errada, onde eu estou errando e o que eu posso fazer para corrigir?

1 Resposta 1

2

Você esquece de aninha-lo na table quando é criada, e a contagem também dá errada por conta do operador > que só retorna true quando já há mais 1, então correto é < 11 ou == 10.

let table = document.querySelector('table');

// Criar inicialmente o elemento tr.
let tr = document.createElement('tr');

table.appendChild(tr);

// Gerar 20 elementos td para extrapolar a quantidade máxima.
for (let t = 1; t <= 20; t ++) {
    let td = document.createElement('td');

    // Inserir o conteúdo do incremento no td.
    td.innerHTML = t;

    // Verificar se o número de filhos é maior do que 10.
    // Se sim criar um novo elemento tr e inserir os td.
    if (tr.childElementCount == 10) {
        tr = document.createElement('tr');
        table.appendChild(tr);
    }
    // adiciona na nova referencia do tr
    tr.appendChild(td);
}
table, td {
    border: 1px solid #505050;
    border-collapse: collapse;
    padding: 10px;
    font-family: sans-serif;
    font-size: 1.1em;
}
<table>

</table>

Espero ter ajudado :)

1
  • Valeu, meu camarada era isso msm :) Commented 9/08/2020 às 16:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .