Numero di riga e colonna della tabella in jQuery

141

Come posso ottenere il numero di riga e colonna della cella della tabella cliccata usando jQuery, ovvero

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

jquery

— Jonas
fonte

216

È possibile utilizzare la funzione Core / index in un determinato contesto, ad esempio è possibile verificare l'indice del TD nel relativo TR principale per ottenere il numero di colonna e si può controllare l'indice TR nella tabella per ottenere il numero di riga:

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

Controlla un esempio corrente qui .

— CMS
fonte

Perché non riesce su spanning colonna @grom?

— EarlyPoster

@Forkrul Assail, @CMS Non funziona con ROWSPAN's jsbin.com/eyeyu/1099/edit#preview Fai clic sulla cella con il testo "12" . L'indice di colonna deve essere 4

— Andrew D.

Ho alcuni dati nella variabile "dati" ..... è possibile aggiungere questi "dati" nella tabella con questo valore col e riga

— shanish

2

ROWSPAN & COLSPAN funzionano: questo fa sì che il clic funzioni quando si utilizza 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
fonte

32

Ottieni COLUMN INDEX con un clic:

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

Ottieni ROW INDEX con un clic:

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

— Louie Santiano
fonte

21

Dalla parte superiore della mia testa, un modo sarebbe quello di prendere tutti gli elementi precedenti e contarli.

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

— Samantha Branham
fonte

6

Puoi generare quei dati nelle celle mentre stai creando la tabella?

quindi il tuo tavolo sarebbe simile a questo:

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

allora sarebbe una questione semplice

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

— Chris Brandsma
fonte

1

A quali specifiche html sono conformi tali attributi? Non riesco a trovarli.

— Samantha Branham,

5

Specifica HTML 5, che consente attributi personalizzati a partire dal prefisso "dati-".

— Chris Brandsma,

anche se non sono nelle specifiche, non distruggeranno i browser meno recenti <HTML5

— Daniel Powell,

1

Puoi accedere ai campi "dati" semplicemente chiamando: $ (this) .data ('row');

— WhiteAngel

0

è meglio associare un gestore di clic all'intera tabella e quindi utilizzare event.target per ottenere il TD selezionato. Questo è tutto ciò che posso aggiungere a questo come le sue 1:20

— mkoryak
fonte

Mentre questo potrebbe essere un valido suggerimento per risolvere il problema, una buona risposta dimostra anche la soluzione. Si prega di modificare per fornire codice di esempio per mostrare quello che vuoi dire. In alternativa, considera invece di scrivere questo come commento.

— Toby Speight,

1

grazie,

— prenderò in