Esta será una respuesta bastante larga, así que la dividiré en tres partes; primero responderé la pregunta que creo que está haciendo, segundo explicaré por qué puede haber una mejor pregunta, y tercero daré algunos consejos para hacer estas preguntas en el futuro que pueden ayudarlo a encontrar qué estas buscando.
Entonces, para comenzar, voy a suponer que eres relativamente nuevo en HTML y Javascript, y solo estás usando vanilla JS. La segunda parte de mi respuesta explicará por qué es posible que desee explorar un marco Javascript frontend para ayudarlo a resolver estos problemas en el futuro.
Aquí hay un codepen que resuelve su problema. Para modificar dinámicamente nuestro contenido HTML, necesitamos usar el Modelo de Objetos del Documento (DOM), que es cómo nuestro navegador representa el HTML para representar (cada etiqueta se convierte en un ‘elemento’). Tomamos el elemento de la tabla que queremos modificar, extraemos el elemento ‘tbody’ dentro de él y luego insertamos una nueva fila en ese elemento cada vez que se hace clic en el botón.
- ¿Qué base de datos debo usar?
- ¿Un fondo negro del sitio web ahorra energía en comparación con uno blanco?
- ¿Qué empresa ofrece los mejores servicios de desarrollo web?
- Cómo crear un formulario de registro en Django para permitir que las personas con identificación específica solo puedan registrarse
- ¿Cómo puedo acceder a un valor variable de una función desde otra función en JavaScript, en el mismo ámbito? ¿Puedes consultar el enlace del bolígrafo de código?
Asumiré que ya ha resuelto este paso, porque la forma en que está redactada su pregunta hace que parezca que el problema que tiene está relacionado con la adición de la fila ‘dinámica’ de alguna manera. No está del todo claro por lo que ha compartido lo que específicamente está tratando de hacer, pero supongo que tendrá un problema con el alcance y los cierres de Javascript.
Aquí hay una discusión en profundidad de los cierres que le recomendaría leer si no está familiarizado. El TL; DR es que cada función Javascript tiene acceso a ciertas variables y funciones, esto constituye su alcance. En el ejemplo simple que di, esto no es un problema porque todo está definido en el nivel superior del código, en lo que se conoce como alcance global . Sin embargo, esto no siempre es práctico, y algunas bibliotecas como jQuery ejecutan sus escuchas de eventos en un contexto diferente al que se define la función.
Aquí hay un ejemplo dinámico del mismo codepen que usa una variable ‘rowNum’ en su alcance. Nuevamente, esto funciona porque la variable y la función se definen en el mismo lugar en el código.
Otra solución es asegurarse de que todas las variables y funciones que necesita para agregar dinámicamente su fila estén definidas dentro de la función de escucha de eventos que escribe. De esta manera, el oyente ‘cierra’ esas variables / funciones y las incluye dentro de su propio alcance. Haremos esto haciendo una función que cuando se llama devuelve una función addRow con todas las variables que necesita en un cierre.
Aquí hay un ejemplo de ese método. Esto funcionará incluso con algo como los oyentes de eventos jQuery porque la función que estamos adjuntando tiene todos los datos que necesita internamente. A menudo verá personas que usan una variación de este método llamada expresión de función invocada inmediatamente (IIFE) donde getClosure es una función anónima que se llama inmediatamente solo para configurar el alcance. Eso se vería así.
Una última opción es usar la función de enlace JS para forzar a un detector de eventos a usar el alcance actual. Puede encontrar documentación sobre eso aquí, no entraré en detalles porque es más avanzado, pero vale la pena entenderlo si desea continuar aprendiendo JS.
Espero que eso responda al menos parte de su pregunta, si no, por favor, deme más detalles sobre el desafío. También continuaré y señalaré que los elementos de la tabla HTML están bastante desactualizados y que probablemente ya no debería usarlos. Fueron diseñados para resolver problemas de diseño que ahora se han resuelto de una mejor manera y vienen con algunos problemas extraños como el problema del cuerpo mencionado anteriormente.
Como alternativa, consulte las reglas CSS de grid y flexbox. Le permiten crear elementos de tabla mucho más flexibles y personalizables.
Si todo lo que está haciendo es agregar un par de elementos HTML, esto está muy bien. Sin embargo, se dará cuenta rápidamente de que esto puede ser un poco tedioso si desea cambiar gran parte de su contenido HTML, especialmente cuando necesita eliminar elementos o agregar cosas en lugares distintos al final. ¡Felicidades! Llegó a las fronteras de HTML y DOM, y descubrió por qué hay un número casi infinito de marcos JavaScript diseñados para hacer que esto sea más sencillo de escribir, más rápido y más predecible.
Está más allá del alcance (jaja …) de esta pregunta profundizar en las ventajas y desventajas de varias soluciones frontend, pero recomendaría probar un par para comprender qué problemas intentan resolver. jQuery es obviamente una recomendación común, aunque es antigua y está siendo reemplazada gradualmente por nuevas metodologías. jQuery proporciona funciones de utilidad para encontrar elementos HTML en el DOM y manipular su contenido y estado. Si todo lo que está haciendo es una página web simple con un poco de contenido dinámico, probablemente será suficiente.
Sin embargo, si desea una gran cantidad de contenido dinámico, es probable que desee tomarse el tiempo para invertir en aprender un marco de aplicaciones web frontend con todas las funciones. Esta no es una tarea trivial y, según su elección y la experiencia previa en programación, puede requerir aprender varias herramientas nuevas, como una herramienta de administración de paquetes / compilaciones o un servidor web.
A la larga, si desea realizar el desarrollo de aplicaciones web, esta es la ruta que deberá seguir: ya nadie crea aplicaciones web modernas manipulando el DOM directamente.
Mi recomendación personal para un marco es VueJS. Es poderoso, muy rápido, algo a prueba de futuro, extremadamente bien documentado y bastante bueno para permitirle aprender un poco a la vez en lugar de forzarlo a una tonelada de nuevos conceptos a la vez.
Aquí hay un ejemplo del mismo Codepen que el anterior, pero implementado en Vue. Notarás que hemos movido el contenido de nuestra tabla fuera del HTML por completo a nuestro JS. Básicamente, hemos creado un modelo de nuestra tabla y estamos permitiendo que Vue se encargue de crear y actualizar la vista HTML de esos datos. Cada vez que agregamos a la propiedad de filas en nuestra instancia de Vue, agrega automáticamente un nuevo elemento HTML a la página. Hay una serie de ventajas que provienen de separar nuestro código en plantillas, datos y lógica, pero la mayor es la reutilización: ahora podemos usar este componente de tabla dinámica en cualquier lugar que queramos y simplemente intercambiar lo que ponemos en él.
Finalmente, solo quería dar algunos consejos para hacer este tipo de preguntas en el futuro. Puede ser realmente difícil responder algo abstracto; Cuanta más información concreta pueda dar sobre su caso de uso, mejor. La mejor opción sería crear un Codepen o Jsfiddle para que las personas puedan ver el código que tiene ahora y ayudar a diagnosticar por qué no funciona.
También es generalmente útil enumerar con qué herramientas (si las hay) está trabajando y cuánta experiencia tiene. De esa manera, las personas pueden adaptar su respuesta al material con el que se sienta cómodo y ayudarlo a presentar ideas que quizás aún no haya encontrado.
Por otro lado, creo que StackOverflow puede ser más adecuado para este tipo de preguntas de cómo , mi impresión es que Quora es más para qué y por qué. Sin embargo, podría estar completamente equivocado sobre esto, esa es solo mi experiencia aquí.
Todo lo mejor, ¡avíseme si no he respondido su pregunta, si tiene más preguntas o si desea consejos para comenzar a usar Vue! ¡Feliz codificación!
