141 votos

Número de fila y columna de la tabla en jQuery

¿Cómo puedo obtener el número de fila y columna de la celda de la tabla en la que se ha hecho clic utilizando jQuery, es decir,

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

216voto

CMS Puntos 315406

Puede utilizar el Núcleo/índice en un contexto determinado, por ejemplo, puede comprobar el índice del TD en su TR padre para obtener el número de columna, y puede comprobar 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);
});

Compruebe un ejemplo en funcionamiento aquí .

119voto

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

32voto

Louie Santiano Puntos 71

Obtener COLUMNA ÍNDICE al hacer clic:

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

Obtenga el ROW INDEX al hacer clic:

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

21voto

Stuart Branham Puntos 4216

De entrada, una forma sería coger todos los elementos anteriores y contarlos.

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

6voto

Chris Brandsma Puntos 7225

¿Puedes imprimir esos datos en las celdas mientras creas la tabla?

por lo que su tabla 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 un asunto sencillo

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

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X