Debuxar a táboa HTML dinámica con JavaScript

– Adxuntar un elemento fillo a outro

O que imos debuxar sobre a mesa é un arranxo. É dicir, a partir do arranxo imos debuxar unha táboa HTML con JavaScript dinámicamente.

Táboa

Nota: Se non sabe como traballar coas táboas estáticas en HTML Look Nesta publicación.

Para debuxar unha táboa HTML con JavaScript tes que definir o encabezado da táboa, porque con JavaScript só imos coidar do corpo.

Polo tanto , permanece así:

Ver a idea de GitHub.

Temos unha táboa HTML cun cabeceiro e dentro del está o tbody co ID cuerpoTabla.

Neste elemento é onde imos anexar os elementos <tr> que á súa vez terá <td>, todo isto con JavaScript.

Así como é, a táboa aínda non ten ningún corpo, só ten o encabezado:

O arranxo

O arranxo que imos debuxar será un tomado doutro dos meus Códigos post. Ras. O mesmo defínese do seguinte xeito:

Ver a idea de GitHub.

O que faremos é pasar polo arranxo usando forEach e Para cada elemento:

1. Crear un elemento tr.
2. a ese elemento tr imos anexar 3 elementos td, como cada elemento td corresponde respectivamente ao nome, prezo e código do produto.
3. Para axustar o texto do td establecemos a súa propiedade textContent.
4. que item tr Anotámolo ao corpo da táboa

Vexamos que no código.

Debuxar a táboa HTML con Javascript

Debemos obter unha referencia ao corpo da táboa usando document.querySelector e unha vez que temos unha referencia a ela, creamos a fila da táboa, Engadimos datos e engádeo ao corpo.

O script é o seguinte:

Ver a idea de GitHub.

O código é mellor explicado nos comentarios.

Por certo, uso o prefixo $ Nas miñas variables simplemente diferenciar entre as variables e os elementos do DOM, ao final a nivel de idioma son iguais, pero como programador sei que se comeza con $ A continuación, refírese a un elemento do DOM.

Agora a táboa ten todos os produtos que se engaden de forma dinámica, e parece así:

Se desexa probar o código prema aquí.

Conclusión

Neste caso, foi cun acordo e unha táboa, pero pode sacar calquera cousa con JavaScript, manipular a SÚA SUND.

Só tes que usar

/ sroll