Close

Manipular evento click en Tabla con jQuery

Vamos a ver un pequeño ejemplo de como interactuar con nuestro objeto <table> situado en nuestro DOM con jQuery y su eventro .on() de manera sencilla.

Nuestro proyecto tiene la siguiente estructura:


evento_click_tabla_jquery_arbol_desarrollohidrocalido

Nuestro HTML

Para dar una mejor vista a nuestro ejemplo importe la librería de Bootstrap, donde simplemente colocamos una etiqueta <div> donde dentro de ella ponemos una etiqueta <table> esto con el fin de hacer nuestra tabla responsiva a base de Bootstrap. Cuando tengamos nuestro table debemos de recordar agregar un id o un class a nuestra tabla para manipularlo desde jQuery en este caso yo lo agregue desde la etiqueta <tbody> que es donde empezaremos a mostrar los datos.

Nuestro Javascript

Declaramos nuestro JS como “use strict” para forzar a trabajar de forma ordenada dentro de nuestro javascript, después manipulamos la tabla a base de su id que declaramos en el DOM en la etiqueta <tbody>, llenamos nuestra tabla a base de un archivo JSON que tenemos dentro de nuestra carpeta JS y recorremos para ir llenando nuestra tabla con un for.
Después tenemos el evento click sobre la tabla en los elementos <td> donde obtenemos el valor de la celda a base del evt y manipulamos los objetos dentro de la celda y el objeto padre a base de parent() donde obtenemos el id con la propiedad data-idalumno que colocamos en el for al momento de ir mostrando la tabla.

Nuestro CSS

De esta manera podemos manipular el evento click de nuestra tabla con una manera sencilla usando el event de nuestro método click.
Existen varios métodos de manipular nuestra tabla ya sea con un simple $(this) en vez de $(event.target) o ya sea al momento de ir mostrando la tabla en la parte del for agregar la propiedad onclick=”miFuncion()”, entre otras.

Aquí pueden ver nuestro Ejemplo funcionar

Descargar

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.