Numéro de ligne et de colonne de la table dans jQuery

141

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

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

jquery

— Jonas
source

216

Vous pouvez utiliser la fonction Core / index dans un contexte donné, par exemple vous pouvez vérifier l'index du TD dans son parent TR pour obtenir le numéro de colonne, et vous pouvez vérifier l'index TR sur la table, 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);
});

Consultez un exemple en cours ici .

— CMS
source

Pourquoi échoue-t-il sur les travées de colonnes @grom?

— EarlyPoster

@Forkrul Assail, @CMS C'est un échec avec ROWSPAN's jsbin.com/eyeyu/1099/edit#preview Cliquez sur la cellule avec le texte "12" . L'index de la colonne doit être 4

— Andrew D.

J'ai quelques données dans la variable "data" ..... est-il possible d'ajouter ces "données" dans le tableau avec cette valeur de

— colonne

2

ROWSPAN & COLSPAN fonctionnent: Cela permet au clic de fonctionner lorsque SPAN est utilisé 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
source

32

Obtenez l'INDICE DE COLONNE en cliquant sur:

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

Obtenez ROW INDEX en cliquant sur:

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

— Louie Santiano
source

21

Du haut de ma tête, une façon serait de saisir 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;
});

— Samantha Branham
source

6

Pouvez-vous sortir ces données dans les cellules lorsque vous créez le tableau?

ainsi votre table 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 question simple

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

— Chris Brandsma
source

1

À quelles spécifications html ces attributs sont-ils conformes? Je n'arrive pas à les trouver.

— Samantha Branham

5

Spécification HTML 5, qui permet des attributs personnalisés commençant par le préfixe «data-».

— Chris Brandsma

même s'ils ne sont pas dans les spécifications, cela ne cassera pas les anciens navigateurs <HTML5

— Daniel Powell

1

Vous pouvez accéder aux champs "data" simplement en appelant: $ (this) .data ('row');

— WhiteAngel

0

il est préférable de lier un gestionnaire de clics à la table entière, puis d'utiliser event.target pour obtenir le TD cliqué. C'est tout ce que je peux ajouter à cela car il est 1h20 du matin

— mkoryak
source

Bien que cela puisse être un indice précieux pour résoudre le problème, une bonne réponse démontre également la solution. Veuillez modifier pour fournir un exemple de code pour montrer ce que vous voulez dire. Vous pouvez également envisager d'écrire ceci comme un commentaire à la place.

— Toby Speight

1

merci, je vais envisager de réviser cette réponse dans 10 ans

— mkoryak