Javascript crea una tabla a partir de un array
Además, esto no utiliza algunas “malas prácticas”, como establecer un atributo de borde en lugar de usar CSS, y accede al cuerpo a través de document.body en lugar de document.getElementsByTagName(‘body’)[0];
Escribí una versión que puede analizar una lista de objetos dinámicamente para crear la tabla como una cadena. Lo dividí en tres funciones para escribir las columnas de la cabecera, las filas del cuerpo y para unirlo todo. He exportado como una cadena para su uso en un servidor. Mi código utiliza cadenas de plantilla para mantener las cosas elegantes.
Javascript añadir fila de la tabla
¡Stack Overflow for Teams se traslada a su propio dominio! Cuando la migración esté completa, accederás a tus Teams en stackoverflowteams.com, y ya no aparecerán en la barra lateral izquierda de stackoverflow.com.
Tengo un array de objetos y quiero convertirlo en una tabla visual en HTML; así lo hice anoche, pero estaba cansado. No creo que sea la forma correcta de hacerlo, aunque funciona y da el resultado esperado.
Intenta que las funciones sean genéricas. Los nombres de las propiedades deben ser dinámicos para que sólo sea necesario hacer pequeños cambios cuando los datos cambien. El ejemplo muestra 4 tablas, cambiar su código para proporcionar las diferentes tablas tomaría mucho más trabajo que añadir 3 llamadas más a la función principal.
const notes = [{note: “n1”, subject: “subject1”, valor: 10 }, {note: “n2”, subject: “subject2”, valor: 15 }, {nota: “n2”, subject: “subject2”, valor: 5 }, {note: “n3”, subject: “subject2”, valor: 20 }];
Biblioteca de tablas en Javascript
La tabla de la captura de pantalla de abajo enumera los 118 elementos incluyendo sus nombres, números atómicos (el número de protones en sus núcleos) y sus símbolos químicos (las abreviaturas utilizadas en las fórmulas químicas como H2O o NaCl).
Antes de empezar a crear las tablas, debo describir brevemente la fuente de datos. En el mundo real, probablemente se rellenaría una tabla a partir de, por ejemplo, una estructura de datos analizada a partir de JSON obtenido de una API REST. Para esta demostración he codificado los datos en un método estático de una clase en elements.js que forma parte del zip de descarga y del repositorio de Github. La clase también tiene métodos para obtener los títulos de las columnas y los nombres de las propiedades de los objetos.
La estructura general es prácticamente la misma, pero esta función utiliza createElement y createTextNode para la tabla, el título, las filas y las celdas, que luego se añaden a sus respectivos padres con appendChild.
La ventaja es que estamos utilizando métodos “oficiales” de puerta de entrada para manipular el DOM, lo cual es más robusto. Si llamamos, por ejemplo, a document.createElement(“tr”) entonces sabemos que obtendremos una <tr> sin preocuparnos de los errores tipográficos o de tener que recordar añadir </tr> al final.
Tabla html
Nota: Los métodos DOM presentados aquí forman parte de la especificación del Modelo de Objetos del Documento (Core) nivel 1. El nivel 1 de DOM incluye tanto métodos para el acceso y la manipulación genérica de documentos (DOM 1 Core) como métodos específicos para documentos HTML (DOM 1 HTML).
Puedes construir esta tabla y sus elementos internos hijos utilizando sólo unos pocos métodos DOM. Recuerda tener en cuenta el modelo de árbol para las estructuras que piensas crear; esto facilitará la escritura del código necesario. En el árbol <table> de la Figura 1 el elemento <table> tiene un hijo: el elemento <tbody>. <tbody> tiene dos hijos. Cada hijo de <tbody> (<tr>) tiene dos hijos (<td>). Por último, cada <td> tiene un hijo: un nodo de texto.Establecer el color de fondo de un párrafoEjemploEn este ejemplo cambiamos el color de fondo de un párrafo cuando se hace clic en un botón.
Crear nodos de texto con document.createTextNode(“..”)Utiliza el objeto documento para invocar el método createTextNode y crear tu nodo de texto. Sólo tienes que pasar el contenido del texto. El valor de retorno es un objeto que representa el nodo de texto.
