Revista Tecnología

Snippet jQuery – Capturar click en todas las celdas menos una

Publicado el 16 febrero 2013 por Biriicom @biriiCom

Supongamos que diseñamos una vista tabular (tabla de filas y columnas) para mostrar datos como nombre, edad, ciudad, email de personas.

Queremos que se pueda hacer click en cualquier lugar de la fila para poder editar sus contenido. Esto es muy cómodo porque no hay que hacer click exactamente encima de algún texto de alguna celda en particular. Sin embargo, queremos añadir en la última columna de cada fila haya un enlace para poder borrar esa fila. ¿Cómo hacemos para que el evento que detecta el click en cualquier lugar de la fila no afecte a la última columna?.

En jQuery es muy sencillo. Para capturar el click en todas las celdas de una fila menos en la última, basta con lo siguiente:

/* Capturar click en todas las celdas salvo la última */
$("#tblItems tbody tr td:not(:last-child)").click( function() {
var idItem= $(this).attr("rel");
this.location= "editar_fila.php?id=" + idItem;
});

Ese código funcionaría con una tabla HTML que tuviera un aspecto como el siguiente:

<table id="tblItems">
<thead>
<tr>
  <th>Nombre</th>
  <th>Edad</th>
  <th>Ciudad</th>
  <th>E-mail</th>
  <th>* Borrar *</th>
</tr>
</thead>

<tbody>
<tr rel="1">
  <td>Pepe</td>
  <td>25</td>
  <td>Segovia</td>
  <td>[email protected]</td>
  <td><a href="borrar.php?id=1">Eliminar fila</a></td>
</tr>
<tr rel="2">
  <td>Maria</td>
  <td>23</td>
  <td>Madrid</td>
  <td>[email protected]</td>
  <td><a href="borrar.php?id=2">Eliminar fila</a></td>
</tr>
</tbody>
</table>

Artículos relacionados:

  • Textillate.js Animaciones de texto usando CSS3
  • Login con Microsoft Live OAuth Connect
  • Snippet – 3 maneras de poner puntos separadores de…
  • Snippet – Calcular la letra del NIF
  • gmaps.js Plugin jQuery para añadir Google maps de forma…

Volver a la Portada de Logo Paperblog

Dossier Paperblog

Revista