1. Planteamiento del problema.
Tenemos el siguiente documento HTML, el cual representa una sección de un formulario técnico:
<html>
<head>
<title>Formulario de Extensionestitle>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"type="text/css"href="../static/styles.css">
head>
<body>
<divclass="container">
<header>
<h1>Extensiones y otras tecnologías relevantes.h1>
header>
<sectionname="sect1"id="sect1">
section><br>
<sectionname="sect2"id="sect2">
<h2>Sección 2: Extensiones.h2>
<p>Señale si emplea alguna de las tecnologías mencionadas a continuación y proporcione la cantidad de instancias o el número de nodos correspondiente a cada una, según sea pertinente.p><br>
<formname="extnsForm"id="extnsForm">
<div>
<tableclass="extension-table">
<thead>
<tr>
<th>Nombre de la Extensiónth>
<th>Número de Instanciasth>
tr>
thead>
<tbody>
<tr>
<td><inputtype="checkbox"id="chkbx1"name="chkbx1"> Active Directorytd>
<td><inputtype="number"id="chkbx1_num"name="chkbx1_num"min="0"class="numInst">td>
tr>
<tr>
<td><inputtype="checkbox"id="chkbx2"name="chkbx2"> Active MQtd>
<td><inputtype="number"id="chkbx2_num"name="chkbx2_num"min="0"class="numInst">td>
tr>
<tr>
<td><inputtype="checkbox"id="chkbx3"name="chkbx3"> Active MQ Artemistd>
<td><inputtype="number"id="chkbx3_num"name="chkbx3_num"min="0"class="numInst">td>
tr>
<tr>
<td><inputtype="checkbox"id="chkbx4"name="chkbx4"> Apache CouchDBtd>
<td><inputtype="number"id="chkbx4_num"name="chkbx4_num"min="0"class="numInst">td>
tr>
<tr>
<td><inputtype="checkbox"id="chkbx5"name="chkbx5"> Apache Kafkatd>
<td><inputtype="number"id="chkbx5_num"name="chkbx5_num"min="0"class="numInst">td>
tr>
table><br>
<divclass="button">
<buttontype="button"onclick="window.location.href='/swchGenApp'">Cancelarbutton>
<buttontype="button"onclick="window.location.href='/swchGenApp'">Guardar Datos de las Extensiones y Continuarbutton>
div>
form>
section>
div>
body>
html>
¿No notas algo raro en este código? En el cuerpo del documento tenemos 5 elementos que se están repitiendo, concretamente de este estilo (en este ejemplo se tomó el segundo elemento):
<tr>
<td><inputtype="checkbox"id="chkbx3"name="chkbx3"> Active MQ Artemistd>
<td><inputtype="number"id="chkbx3_num"name="chkbx3_num"min="0"class="numInst">td>
tr>
Los elementos de esta tabla son un checkbox en la primer columna, seguido del nombre del elemento (en este caso, el nombre de la tecnología es “Active MQ”, y en la segunda columna una caja de texto que solo admite números.
En este ejemplo son solo 5, pero en el proyecto original, ¡el cliente solicitó un checklist de 50 elementos! y todos tienen diferentes nombres de tecnología. Ahora con todo este contexto, el plantamiento del problema es ¿Cómo podemos generar la tabla sin tener que insertar cada elemento de manera manual?
2. Desarrollo de la solución.
2.1. Lo primero que debemos hacer, es crear un archivo script.js, que puede estar en la ruta: …/static/script.js . Posteriormente hay que apuntar este archivo en el documento HTML, justo antes del cierre de la etiqueta
Cabe recordar, que el atributo defer
le indica al navegador que retrase la ejecución del script hasta que se haya cargado todo el contenido de la página.
2.2. Ya en el archivo script.js, vamos a crear un array de objetos que contengan la información de los elementos que queremos listar en la tabla del documento HTML:
const extensiones = [
{ id:"chkbx1", name:"Active Directory" },
{ id:"chkbx2", name:"Active MQ" },
{ id:"chkbx3", name:"Active MQ Artemis" },
{ id:"chkbx4", name:"Apache CouchDB" },
{ id:"chkbx5", name:"Apache Kafka" },
// Agrega más extensiones si lo deseas
];
2.3. Sobre el mismo archivo script.js
vamos a crear una función que genere dinámicamente las filas de la tabla con base del array de objetos que establecimos en el punto anteiror. ¡Voy aexplicar cada parte del codigo a punta de comentarios, por más obvio que parezca! Solo por fines didácticos.
// INICIO// Función para generar filas dinámicas en la tabla de extensiones
functiongenerarFilas() {
// Selecciona el elemento "tbody" dentro de un elemento con clase "extension-table"
const tbody = document.querySelector(".extension-table tbody");// Itera sobre el array "extensiones"
extensiones.forEach((extension) => {
// Crea un nuevo elemento "tr" (fila de tabla)
const fila = document.createElement("tr");// Crea un nuevo elemento "td" (columna de tabla) para la primera columna
const columna1 = document.createElement("td");// Crea un nuevo elemento "input" de tipo "checkbox"
const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.id = extension.id;
checkbox.name = extension.id;// Añade el elemento "checkbox" a la primera columna
columna1.appendChild(checkbox);// Añade el nombre de la extensión junto al checkbox en la primera columna
columna1.innerHTML += ` ${extension.name}`;// Crea un nuevo elemento "td" (columna de tabla) para la segunda columna
const columna2 = document.createElement("td");// Crea un nuevo elemento "input" de tipo "number"
const inputNumero = document.createElement("input");
inputNumero.type = "number";
inputNumero.id = `${extension.id}_num`;
inputNumero.name = `${extension.id}_num`;
inputNumero.min = "0";// Añade la clase "numInst" al elemento "input"
inputNumero.classList.add("numInst");// Añade el elemento "input" a la segunda columna
columna2.appendChild(inputNumero);// Añade las dos columnas a la fila
fila.appendChild(columna1);
fila.appendChild(columna2);// Añade la fila completa al "tbody" seleccionado previamente
tbody.appendChild(fila);
});
}
// FIN
2.4. La cereza del pastel: Como última linea del script.js llama a la función generarFilas()
cuando se haya cargado el contenido de la página:
document.addEventListener("DOMContentLoaded", generarFilas);
Conclusión del desarrollo: Con estos pasos, las filas de la tabla se generarán dinámicamente utilizando JavaScript, lo que evitará la repetición de elementos y hará que el código sea más fácil de mantener y actualizar.
Nota: No olvides borrar todos los elementos en el cuerpo de la tabla, en el documento HTML. Haciendo los cambios, el archivo HTML final quedaría como sigue:
<html>
<head>
<title>Formulario de Extensionestitle>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<linkrel="stylesheet"type="text/css"href="../static/styles.css">
head>
<body>
<divclass="container">
<sectionname="sect2"id="sect2">
<h2>Sección 2: Extensiones.h2>
<p>Señale si emplea alguna de las tecnologías mencionadas a continuación y proporcione la cantidad de instancias o el número de nodos correspondiente a cada una, según sea pertinente.p><br>
<formname="extnsForm"id="extnsForm">
<div>
<tableclass="extension-table">
<thead>
<tr>
<th>Nombre dela Extensiónth>
<th>Número de Instanciasth>
tr>
thead>
<tbody>
tbody>
table><br>
<divclass="button">
<buttontype="button"onclick="window.location.href='/swchGenApp'">Cancelarbutton>
<buttontype="button"onclick="window.location.href='/swchGenApp'">Guardar Datos de las Extensiones y Continuarbutton>
div>
form>
section>
div>
<scriptsrc="main.js"defer>script>
body>
html>
3. Resultado.
Cargando el código en un explorador (Google Chrome), el proyecto queda como sigue:
Conclusiones generales.
En este proyecto, combinamos HTML y JavaScript para crear dinámicamente las filas de una tabla en un formulario. El archivo HTML aloja el formulario, mientras que el archivo de JavaScript gestiona un conjunto de nombres (tambien llamadas extensiones, en el contexto del proyecto) y genera las componentes de la tabla automáticamente. Gracias a esta integración, dejamos de hacer hardcode den nuestra plantilla HTML.
No dudes en contactarme, en caso de que tengas alguna pregunta o comentario con respecto a esta manera de programar.
Con gratitud,
MeLuisCruz