Cómo crear tabla dinámicamente en JavaScript

Una tabla dinámica es una tabla que cambia su número de filas dependiendo de la entrada recibida en el tiempo de ejecución. Algunos sitios web o aplicaciones en línea, como los sitios web comerciales, necesitan crear una tabla dinámicamente mientras agregan algunos datos o información. Se puede hacer usando JavaScript, ya que JavaScript es un lenguaje de secuencias de comandos que utiliza la tipificación dinámica.

Esta publicación de blog demostrará el proceso para crear una tabla dinámica en JavaScript.

Cómo crear una tabla dinámicamente en JavaScript?

Veamos un ejemplo que explica cómo se creará una tabla dinámica en JavaScript.

Ejemplo
Para comenzar, escriba las siguientes líneas en un nuevo documento HTML para crear un formulario que tome datos y luego lo muestre en una tabla agregándolo dinámicamente:

Llene el siguiente formulario:

Nombre:



Género:



Designación:



Dia de ingreso:



Agregar datos a la tabla

En el fragmento de código anterior:

• Primero, crea un encabezado "Llene el siguiente formulario:".
• Crear campos de entrada para "Nombre","Género","Designación", y "Dia de ingreso"Con la identificación asignada"nombre","género","designación", y "fecha"Respectivamente, para tomar los valores de entrada del usuario.
• Estas ID se utilizan para obtener la referencia de los elementos en JavaScript.
• Luego, cree un botón con el "al hacer clic"Propiedad que llamará al"addtablerow ()"Función en un archivo de script, para agregar y mostrar los datos en una tabla:

Aquí, en el archivo HTML, escriba estas líneas de código para crear una estructura de tabla, donde los datos se agregarán dinámicamente:

Registro de empleados

Nombre

Género

Designación

Dia de ingreso

En el código anterior:

• Crear una tabla con la identificación "tabicita"Eso se utilizará en el archivo de script para obtener la referencia de esta tabla y luego agregarle los datos.
• La tabla contiene cuatro columnas ","Nombre","Género","Designación", y "Dia de ingreso"Eso almacenará datos de acuerdo con los nombres de la columna.

Ejecutar el archivo HTML dará como resultado la siguiente salida del navegador:

Agregamos funcionalidad para crear tablas dinámicamente usando JavaScript. En el archivo o etiqueta de script, use el siguiente código que creará una tabla dinámicamente:

función addtableRow ()
nombre var = documento.getElementById ("nombre");
var gender = documento.getElementById ("género");
designación var = documento.getElementById ("designación");
VAR fecha = documento.getElementById ("fecha");
Tabla var = documento.getElementById ("TableData");
var rowcount = tabla.hilera.longitud;
Var fila = tabla.InserTrow (RowCount);
fila.insertcell (0).innerhtml = nombre.valor;
fila.insertcell (1).innerhtml = género.valor;
fila.insertcell (2).innerhtml = designación.valor;
fila.insertcell (3).innerhtml = fecha.valor;

En el fragmento anterior:

• Primero, defina una función "addtablerow ()"Que activará el evento de clic del botón HTML.
• Luego, obtenga la referencia de todos los campos de entrada uno por uno usando sus respectivas IDS asignadas usando el "getElementById ()"Método y guárdelos en variables.
• Estas variables se utilizarán para obtener el valor de los campos de entrada utilizando el HTML "valor"Propiedad y colóquelas en las celdas individuales en la tabla utilizando el"innerhtml" propiedad.
• Agregue filas en una tabla utilizando el "mesa.hilera.longitud"Propiedad y luego almacenar valores en ella.

Producción

La salida anterior indica que la tabla dinámica se crea correctamente agregando datos en un formulario usando JavaScript.

Conclusión

La tabla dinámica se crea utilizando las diferentes propiedades HTML con métodos predefinidos de JavaScript. Primero, cree un formulario en un archivo HTML y luego obtenga la referencia de los campos utilizando métodos predefinidos de JavaScript como el "getElementById ()Método "y luego recuperar sus valores ingresados ​​utilizando el"valor" propiedad. Establezca estos valores en las columnas respectivas de una tabla utilizando el "innerhtml" propiedad. Esta publicación de blog demuestra el proceso para crear una tabla dinámica en JavaScript.