¿Cómo definir const cuerpotabla en JavaScript?

Contenido del Bootcamp Dirigido por: | Última modificación: 5 de julio de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

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++) {
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.

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.

🔴 ¿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

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

Posts más leídos

¡CONVOCATORIA ABIERTA!

Aprende a Programar desde Cero

Full Stack Jr. Bootcamp

Apúntate y consigue uno de los perfiles más demandados con Python en solo 4 meses.