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?