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 los muestre en una tabla al agregarlos dinámicamente:
< identificación div = 'miformulario' >
< h4 > Rellene el siguiente formulario : h4 >
< etiqueta > Nombre : etiqueta >
< tipo de entrada = 'texto' identificación = 'nombre' >< hermano >< hermano >
< etiqueta > Género : etiqueta >
< tipo de entrada = 'texto' identificación = 'género' >< hermano >< hermano >
< etiqueta > Designacion : etiqueta >
< tipo de entrada = 'texto' identificación = 'designacion' >< hermano >< hermano >
< etiqueta > Unión Fecha : etiqueta >
< tipo de entrada = 'fecha' identificación = 'fecha' >< hermano >< hermano >
< identificación del botón = 'agregar' valor = 'Agregar' > Agregar datos a la tabla botón >
división >
En el fragmento de código anterior:
- Primero, crea un encabezado “ Rellene el siguiente formulario: ”.
- Crear campos de entrada para “ Nombre ”, “ Género ”, “ Designacion ', y ' Dia de ingreso ” con identificación asignada “ nombre ”, “ género ”, “ designacion ', y ' fecha ” respectivamente, para tomar los valores de entrada del usuario.
- Estos identificadores se utilizan para obtener la referencia de los elementos en JavaScript.
- Luego, crea un botón con el “ al hacer clic ” propiedad que llamará el “ añadirTableRow() ” 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:
< división >
< h4 > Registro de empleados b > h4 >
< centro >
< identificación de la tabla = 'datos de la tabla' borde = '1' relleno celular = '2' >
< tr >
< td >< b > Nombre b > td >
< td >< b > Género b > td >
< td >< b > Designacion b > td >
< td >< b > Dia de ingreso b > td >
tr >
mesa >
centro >
división >
En el código anterior:
- Crea una tabla con el id “ datos de la tabla ” que se usará 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 ”, “ Designacion ', y ' Dia de ingreso ” que almacenará datos de acuerdo con los nombres de las columnas.
Ejecutar el archivo HTML dará como resultado el siguiente resultado del navegador:
Agreguemos funcionalidad para crear tablas dinámicamente usando JavaScript. En el archivo de secuencia de comandos o la etiqueta, use el siguiente código que creará una tabla dinámicamente:
función añadirTableRow ( ) {estaba nombre = documento. getElementById ( 'nombre' ) ;
estaba género = documento. getElementById ( 'género' ) ;
estaba designacion = documento. getElementById ( 'designacion' ) ;
estaba fecha = documento. getElementById ( 'fecha' ) ;
estaba mesa = documento. getElementById ( 'datos de la tabla' ) ;
estaba número de filas = mesa. filas . longitud ;
estaba fila = mesa. insertar fila ( número de filas ) ;
fila. insertCell ( 0 ) . HTML interno = nombre. valor ;
fila. insertCell ( 1 ) . HTML interno = género. valor ;
fila. insertCell ( 2 ) . HTML interno = designacion. valor ;
fila. insertCell ( 3 ) . HTML interno = fecha. valor ;
}
En el fragmento anterior:
- Primero, defina una función “ añadirTableRow() ” 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 respectivos identificadores asignados usando el ' getelementById() ” y almacenarlos en variables.
- Estas variables se usarán para obtener el valor de los campos de entrada usando el HTML “ valor ” y configúrelos en las celdas individuales de la tabla usando el “ HTML interno ' propiedad.
- Agregue filas en una tabla utilizando el ' tabla.filas.longitud ” propiedad y luego almacenar valores en ella.
Producción
El resultado anterior indica que la tabla dinámica se creó con éxito al agregar 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() ” y luego recuperar sus valores ingresados usando el “ valor ' propiedad. Establezca estos valores en las columnas respectivas de una tabla usando el ' HTML interno ' propiedad. Esta publicación de blog demuestra el proceso para crear una tabla dinámica en JavaScript.