Tabla de Pendientes con JS/JQuery

En esta publicación vamos a realizar una pequeño y fácil script en JavaScript que realizara el trabajo de una pequeña tabla de pendientes.

Este ejercicio es bastante útil, no necesariamente por que vayamos a incluir una tabla de pendientes en una de nuestras páginas web sino porque podemos sacarle algunas ideas para otras cosas que deseemos realizar solo basta con cambiar la idea principal y aunque no se quede guardado ya que no haremos uso de base de datos es un ejercicio que podría resolverte varias dudas con respeto a la creación de nuevos elementos hijo o su eliminación.

Pasos:

  1. En el el head le agregamos el <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”> para poder hacer el query que necesitamos.
  2. Creamos un archivo html en este tendremos una entrada de tipo texto y le podremos un id = textoTarea, este input nos servirá para ingresar el texto de nuestro pendiente. Creamos un botón el cual le podremos un id = btnAniadir el cual tiene como texto Añadir, como el texto lo dice este botón contendrá el evento para añadir el pendiente o tarea.
  3. Aquí podría ser de diferentes maneras como crear la tabla completamente desde el script, pero aquí crearemos el encabezado de la tabla desde el html, creamos una tabla la cual tendrá como id= TablaPendientes.
    1. Dentro de la tabla creamos el cuerpo de la tabla mediante la etiqueta <body> y creamos la fila del encabezado con la etiqueta tr el cual tiene definido class = “FileRen”, este encabezado tendrá 3 columnas Fecha, Pendiente, Estado y no constará de ningún id.
  4. Darle diseño, le daremos un pequeño diseño a nuestra tabla para que no se vea tan feo.
  5. Ya en el script instanciamos la variable btnAniadir la cual obtendrá el elemento botón que creamos, textoPendiente que obtendrá el elemento de la entrada de tipo texto, tbody obtendrá el cuerpo de la tabla que servirá para agregarle los renglones que vamos creando, ren obtendrá los renglones y realizara un query, checa obtendrá los elementos qie tienen estado para realizar un query y una variable de tipo fecha para sacar la fecha del dia.
  6. Creamos un evento a btnAniadir en el cual cada que demos clic crearemos un TR y sus respectivos TD, el primer TD le creamos un nodo texto donde sacamos la fecha por medio de la variable fecha que creamos previamente, el segundo TD le creamos un nodo texto apartir del texto que ingresamos, y al tercer le creamos un nodo texto con la palabra “PENDIENTE” y le agregamos un atrubuto “class” de nombre “estado” para crearele un query a ese TD, los tres TD se los agregamos a el TR y este TR se los agregamos al cuerpo de la tabla tbody.
  7. En el mismo evento de btnAniadir creamos un query para la variable ren que es la que tiene todos los elementos que tienen la clase = “FilaRen” eliminar cada vez que un renglón tenga doble clic
  8. Creamos otro query con la variable checa que es la que obtiene todos los elementos que tienen la clase = “estado”, para que cada que le demos clic a la ultima celda de cada fila cambie su estado.

 

See the Pen
JzaNJX
by Jonathan Eduardo (@JhonQuistiano)
on CodePen.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Límite de tiempo se agote. Por favor, recargar el CAPTCHA por favor.