¿Cómo definir const cuerpotabla en JavaScript?

Autor: | Última modificación: 29 de agosto de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post: ,

Para recorrer los resultados de una petición, en este artículo te traemos un ejercicio práctico para definir const cuerpotabla en JavaScript. En el ejemplo que te presentamos para comprender cómo emplear const cuerpotabla en JavaScript, nos enfocamos en realizar una aplicación que registrara los ingresos y gastos de una cuenta o lista de movimientos. Por lo tanto, este objeto, definido como const, nos servirá para generar nuevos campos o filas en una de las tablas de los movimientos.

Cómo definir const cuerpotabla en JavaScript

Para definir const cuerpotabla en tu programa que desarrolla una aplicación que registra ingresos y gastos, deberás pasar por tres pasos obligatorios. Dichos pasos son los siguientes:

  • Establecer los objetos: en un primer momento, deberás establecer los objetos que se desarrollarán en este proceso. Este es el cuerpo de la tabla o cuerpoTabla, que será intervenido por el método document.getElementById bajo el archivo donde se encuentra la información, que es cuerpo.tabla.
    Por otro lado, debemos instanciar un proceso para recorrer la lista o array que nos piden los resultados. Entonces, para realizar un array, lo hacemos como en un for con Python. Allí se define una variable que tendrá una condición que se cumple mientras se ejecute el programa. Si deja de cumplirse, el for se acaba y no se ejecuta. Ya que es un array o una lista en Python, debemos hablar de length.
  • Definir los movimientos: antes de recibir un movimiento, tendrás que definir los bucles de movimiento para los campos de la hora, fecha y, por otro lado, del ingreso y gasto. En este caso, si no existe la hora, tendrás que establecer un símbolo que pinte la hora vacía. Esto mismo lo realizaremos con el movimiento de ingreso y gasto de la tabla. Allí, establecerás los nombres de Ingreso y Gasto, según sea la naturaleza del movimiento que se está caracterizando.
  • Generar la fila en HTML dentro del script de JavaScript: por último, deberás encargarte de generar una tabla en HTML para que se vaya regenerando cada vez que el programa pase por este extracto del script. Cada fila nueva se concatenará con la fila anteriormente creada y así sucesivamente.
    Cuerpo-tabla tiene una propiedad InnerHTML, que es todo lo que se encuentra dentro de la etiqueta de HTML.

Cuando cumplas estos tres pasos, podrás darte cuenta de que has definido const cuerpotabla en JavaScript para una aplicación que esté registrando los ingresos y gastos de una cuenta en sus diferentes pantallas.

Script para definir const cuerpotabla en JavaScript

A continuación, te presentamos un extracto de script, encontrado en el fichero balance.js de nuestro programa de código, donde hemos establecido todo el proceso para definir const cuerpotabla en JavaScript:

const cuerpoTabla = document.getElementById (‘cuerpo – tabla’)

let htmlFilas = ‘ ‘

for (let 1 = 0; 1 < movimientos.length; i++) {

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

mov = movimientos [i]
if (!mov.hora) {

mov.hora = ‘–:–‘;

}

if (mov.ingreso_gasto == ‘G’) {

mov.ingreso_gasto = ‘Gasto’

} else {

mov.ingreso_gasto = ‘Ingreso’

}

htmlFilas = htmFilas + ‘

<tr>

<td> $ {mov.fecha} </td>

<td> $ {mov.hora} </td>
<td class = «text – left»> S {mov.concepto} </td>
<td> $ {mov.ingreso_gasto} </td>

<td class = «text – left»> $ {mov.cantidad} </td>

</tr>

cuerpoTabla.innerHTML = htmlFilas

De esta manera, ya sabes cómo es el proceso para definir const cuerpotabla en JavaScript y puedes reproducir los mismos pasos en tu programa de código.

¿Qué puedes hacer ahora?

Como has podido ver a lo largo de este artículo, definir const cuerpotabla en JavaScript es un proceso simple, pero que tiene un poder importante dentro de la creación de la tabla y de la aplicación web, dado que permite que se generen nuevas filas y campos al solo estar ingresando información.

Si quieres aprender mucho más acerca de cómo funciona JavaScript o las bases fundamentales para la programación y el sector ID, no dudes en inscribirte en nuestro Aprende a Programar desde Cero Full Stack Jr. Bootcamp. ¡Te aseguramos que podrás cumplir tu sueño laboral en menos de un año!

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!