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

Comment obtenir le numéro de ligne et de colonne de la cellule de table cliquée en utilisant jQuery, i.e.,

$("td").onClick(function(event){
   var row = ...
   var col = ...
});
134
demandé sur Jonas 2009-04-25 08:25:13

6 réponses

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);
});

vérifier un exemple d'exécution ici .

205
répondu CMS 2009-04-25 05:31:40
$('td').click(function() {
    var myCol = $(this).index();
    var $tr = $(this).closest('tr');
    var myRow = $tr.index();
});
115
répondu Phillip Senn 2011-03-07 21:39:04

obtenir L'INDEX des colonnes sur le clic:

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

Obtenir de l'INDEX de LIGNE sur cliquez sur:

$(this).closest("tr").index();
25
répondu Louie Santiano 2012-08-10 19:08:15

sur le dessus 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;
});
21
répondu Samantha Branham 2009-04-25 05:32:50

pouvez-vous produire ces données dans les cellules que vous créez la table?

donc 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 chose simple

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}
6
répondu Chris Brandsma 2009-04-25 15:33:19

il est préférable de lier un gestionnaire de clic à la table entière et ensuite utiliser l'événement.cible pour obtenir le TD cliqué. C'est tout ce que je peux ajouter à cela comme son 1: 20am

1
répondu mkoryak 2009-04-25 05:20:54