Numer wiersza i kolumny tabeli w jQuery

141

Jak uzyskać numer wiersza i kolumny klikniętej komórki tabeli za pomocą jQuery, tj.

$("td").onClick(function(event){
   var row = ...
   var col = ...
});
Jonas
źródło

Odpowiedzi:

216

Możesz użyć funkcji Core / index w danym kontekście, na przykład możesz sprawdzić indeks TD w jego macierzystym TR, aby uzyskać numer kolumny, i możesz sprawdzić indeks TR w tabeli, aby uzyskać numer wiersza:

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

Sprawdź uruchomioną przykład tutaj .

CMS
źródło
Dlaczego kończy się niepowodzeniem w kolumnach obejmujących @grom?
EarlyPoster
@Forkrul Assail, @CMS Niepowodzenie z ROWSPAN's jsbin.com/eyeyu/1099/edit#preview Kliknij komórkę z tekstem „12” . Indeks kolumny musi wynosić 4
Andrew D.
Mam pewne dane w zmiennej "data" ..... czy jest możliwe dodanie tych "danych" do tabeli z tą kolumną i wartością wiersza
shanish Kwietnia
2
ROWSPAN i COLSPAN obejść: To sprawia, że ​​kliknięcie działa, gdy używany jest 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
źródło
32

Pobierz COLUMN INDEX po kliknięciu:

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

Uzyskaj ROW INDEX po kliknięciu:

$(this).closest("tr").index();
Louie Santiano
źródło
21

Jednym ze sposobów byłoby złapanie wszystkich poprzednich elementów i policzenie ich.

$('td').click(function(){ 
    var colIndex = $(this).prevAll().length;
    var rowIndex = $(this).parent('tr').prevAll().length;
});
Samantha Branham
źródło
6

Czy możesz umieścić te dane w komórkach podczas tworzenia tabeli?

więc twój stół wyglądałby tak:

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

wtedy byłaby to prosta sprawa

$("td").click(function(event) {
   var row = $(this).attr("data-row");
   var col = $(this).attr("data-col");
}
Chris Brandsma
źródło
1
Z jaką specyfikacją HTML są zgodne te atrybuty? Nie mogę ich znaleźć.
Samantha Branham
5
Specyfikacja HTML 5, która zezwala na atrybuty niestandardowe zaczynające się od przedrostka „data-”.
Chris Brandsma
nawet jeśli nie są w specyfikacji, nie zepsują starszych przeglądarek <HTML5
Daniel Powell
1
Dostęp do pól „danych” można uzyskać, wywołując: $ (this) .data ('row');
WhiteAngel
0

lepiej jest powiązać procedurę obsługi kliknięcia z całą tabelą, a następnie użyć zdarzenia event.target, aby uzyskać kliknięty TD. To wszystko, co mogę dodać do tego, ponieważ jest 1:20 rano

mkoryak
źródło
Chociaż może to być cenna wskazówka, aby rozwiązać problem, dobra odpowiedź również pokazuje rozwiązanie. Proszę edit dostarczyć przykładowy kod, aby pokazać to, co masz na myśli. Zamiast tego rozważ napisanie tego jako komentarza.
Toby Speight
1
dzięki, rozważę zrewidowanie tej odpowiedzi za kolejne 10 lat
mkoryak