¿Cómo se indica en qué número de fila se hace clic en una tabla?

Tengo una mesa como la siguiente:

111
222
333

Cuando un usuario hace clic en la tabla, ¿cómo puedo obtener el índice de esta fila (elemento tr )?

Por ejemplo, cuando hago clic en el primer tr (con 1 s en la tabla anterior), debe recogerlo y devolver 1 .

Esto le daría el índice de la fila cliqueada, comenzando con uno:

 $('#thetable').find('tr').click( function(){ alert('You clicked row '+ ($(this).index()+1) ); }); 

Si desea devolver el número almacenado en esa primera celda de cada fila:

 $('#thetable').find('tr').click( function(){ var row = $(this).find('td:first').text(); alert('You clicked ' + row); }); 

Un mejor enfoque sería delegar el evento, lo que significa atraparlo mientras burbujea hacia el nodo padre.

delegación – descripción general

Esta solución es a la vez más robusta y eficiente.

Permite que el evento se maneje incluso si más filas se agregan dinámicamente a la tabla más tarde, y también da como resultado la vinculación de un único controlador de eventos al nodo principal (elemento de table ), en lugar de uno para cada nodo secundario (elemento tr ).

Suponiendo que el ejemplo de OP es simplificado, la estructura de la tabla puede ser más compleja, por ejemplo:

  ... 

1

2

3

Por lo tanto, un enfoque simplista como obtener e.target.parentElement no funcionará, ya que al hacer clic en

interno y hacer clic en el centro

obtendrán resultados diferentes.

Usar delegación normaliza el manejo de eventos, solo suponiendo que no haya tablas anidadas.

implementación

Los dos fragmentos siguientes son equivalentes:

 $("#indexedTable").delegate("tr", "click", function(e) { console.log($(e.currentTarget).index() + 1); }); $("#indexedTable").on("click", "tr", function(e) { console.log($(e.currentTarget).index() + 1); }); 

Atan un elemento listener al table y manejan cualquier evento que burbujee desde las filas de la tabla. La API actual es el método on y el método delegate es la API heredada (y en realidad llama detrás de escena).

Tenga en cuenta que el orden de los parámetros para ambas funciones es diferente.

ejemplo

Una comparación entre el adjunto de controlador directo y la delegación está disponible a continuación o en jsFiddle:

 $("#table-delegate").on("click", "tr", function(e) { var idx = $(e.currentTarget).index() + 1; $("#delegation-idx").text(idx); console.log('delegated', idx); }); $("#table-direct tr").on("click", function(e) { var idx = $(e.currentTarget).index() + 1; $("#direct-idx").text(idx); console.log('direct', idx); }); $('[data-action=add-row]').click(function(e) { var id = e.target.dataset.table; $('#' + id + ' tbody') .append($('extraextraextra')[0]) }); 
 tr:hover{ background:#ddd; } button.add-row { margin-bottom: 5px; } 
    

Event handling test

Add rows to both tables and see the difference in handling.

Event delegation attaches a single event listener and events related to newly added children are caught.

Direct event handling attaches an event handler to each child, where children added after the inital handler attachment don't have a handler attached to them, and therefore their indices won't be logged to console.

Delegation

row index: unknown

normal normal normal

nested

nested

nested

normal normal

nested

Direct attachment

row index: unknown

normal normal normal

nested

nested

nested

normal normal

nested

Puede usar la propiedad object.rowIndex que tiene un índice que comienza en 0.

 $("table tr").click(function(){ alert (this.rowIndex); }); 

Vea una demostración en funcionamiento

Una solución simple y sin jQuery:

 document.querySelector('#elitable').onclick = function(ev) { // ev.target < == td element // ev.target.parentElement <== tr var index = ev.target.parentElement.rowIndex; } 

Bonificación: funciona incluso si las filas se agregan / eliminan dinámicamente

 $('tr').click(function(){ alert( $('tr').index(this) ); }); 

Para el primer tr , alerta 0. Si desea alertar 1, puede agregar 1 al índice.

En algunos casos, podríamos tener un par de tablas, y luego tenemos que detectar el clic solo para una tabla en particular. Mi solución es esta:

 
100AAAaaa
200BBBbbb
300CCCccc

MANIFESTACIÓN