Número de fila y columna de tabla en jQuery

141

¿Cómo obtengo el número de fila y columna de la celda de la tabla en la que hago clic usando jQuery, es decir,

$("td").onClick(function(event){
   var row = ...
   var col = ...
});

jquery

— Jonas
fuente

216

Puede usar la función Core / index en un contexto dado, por ejemplo, puede verificar el índice del TD en su TR principal para obtener el número de columna, y puede verificar el índice TR en la Tabla, para obtener el número de fila:

$('td').click(function(){
  var col = $(this).parent().children().index($(this));
  var row = $(this).parent().parent().children().index($(this).parent());
  alert('Row: ' + row + ', Column: ' + col);
});

Mira un ejemplo en ejecución aquí .

— CMS
fuente

¿Por qué falla en la columna se extiende @grom?

— EarlyPoster

@Forkrul Assail, @CMS No funciona con ROWSPAN's jsbin.com/eyeyu/1099/edit#preview Haga clic en la celda con el texto "12" . El índice de la columna debe ser 4

— Andrew D.

Tengo algunos datos en la variable "datos" ..... ¿es posible agregar estos "datos" en la tabla con este valor de columna y fila

— shanish

2

ROWSPAN y COLSPAN funcionan: esto hace que el clic funcione cuando se usa SPAN jsbin.com/eyeyu/1307/edit

— eddyparkinson

9

var row = $(this).closest('tr').index()

— SpYk3HH

119

$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});

— Phillip Senn
fuente

32

Obtenga el ÍNDICE DE COLUMNA al hacer clic:

$(this).closest("td").index();

Obtenga el ÍNDICE DE LA FILA al hacer clic:

$(this).closest("tr").index();

— Louie Santiano
fuente

21

Fuera de mi cabeza, una forma sería tomar todos los elementos anteriores y contarlos.

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});

— Samantha Branham
fuente

6

¿Puede generar esos datos en las celdas mientras crea la tabla?

entonces su mesa se vería así:

<table>
  <thead>...</thead>
  <tbody>
    <tr><td data-row='1' data-column='1'>value</td>
      <td data-row='1' data-column='2'>value</td>
      <td data-row='1' data-column='3'>value</td></tr>

  <tbody>
</table>

entonces sería una cuestión simple

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}

— Chris Brandsma
fuente

1

¿Con qué especificación html cumplen esos atributos? Parece que no puedo encontrarlos.

— Samantha Branham el

55

Especificación HTML 5, que permite atributos personalizados que comienzan con el prefijo 'datos-'.

— Chris Brandsma

a pesar de que no están en especificación, no romperá los navegadores más antiguos <HTML5

— Daniel Powell

1

Puede acceder a los campos de "datos" simplemente llamando: $ (this) .data ('row');

— WhiteAngel

0

es mejor vincular un controlador de clics a toda la tabla y luego usar event.target para obtener el TD cliqueado. Eso es todo lo que puedo agregar a esto, ya que son las 1:20 a.m.

— mkoryak
fuente

Si bien esto podría ser una pista valiosa para resolver el problema, una buena respuesta también demuestra la solución. Por favor edición para proporcionar código de ejemplo para mostrar lo que quiere decir. Alternativamente, considere escribir esto como un comentario.

— Toby Speight

1

gracias, consideraré revisar esta respuesta en otros 10 años

— mkoryak