Numéro de ligne et de colonne de tableau en jQuery

Question

Comment obtenir le numéro de ligne et de colonne de la cellule du tableau sur laquelle on a cliqué en utilisant jQuery, c'est-à-dire..,

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

Answer 1

Vous pouvez utiliser le Core/index dans un contexte donné. Par exemple, vous pouvez vérifier l'index du TD dans son TR parent pour obtenir le numéro de colonne, et vous pouvez vérifier l'index du TR sur le tableau, pour obtenir le numéro de ligne :

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

Vérifiez un exemple en cours d'exécution aquí .

Answer 2

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

Answer 3

Obtenez COLUMN INDEX en cliquant :

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

Obtenez ROW INDEX en cliquant :

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

Answer 4

Je pense qu'une façon de procéder serait de prendre tous les éléments précédents et de les compter.

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

Answer 5

Pouvez-vous sortir ces données dans les cellules au moment où vous créez le tableau ?

donc votre tableau ressemblerait à ceci :

<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>

alors ce serait une simple question

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