JQuery'de tablo satırı ve sütun numarası


141

JQuery'yi kullanarak tıklanan tablo hücresinin satır ve sütun numarasını nasıl alabilirim, yani,

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

Yanıtlar:


216

Sen kullanabilirsiniz Çekirdek / index , sütun numarası almak için 's ana TR'de TD dizinini kontrol edebilirsiniz örneğin, belirli bir bağlamda işlevi ve satır numarası almak için, Tablo üzerinde TR endeksi kontrol edebilirsiniz:

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

Burada çalışan bir örneği inceleyin .


@Grom sütunu neden başarısız oluyor?
EarlyPoster

@Forkrul saldırmak, O ile başarısız olduğunu @CMS ROWSPAN's jsbin.com/eyeyu/1099/edit#preview metinle hücre üzerinde tıklayın "12" . Sütun dizini 4
Andrew D.

Değişken "veri" bazı veriler var ..... bu col ve satır değeri ile tabloya bu "veri" eklemek mümkün
shanish

2
ROWSPAN & COLSPAN bu sorunu giderir: SPAN kullanıldığında tıklamanın çalışmasını sağlar 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();
});

32

Tıklayın COLUMN INDEX tıklayın:

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

Tıklamada ROW INDEX'i edinin:

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

21

Başımın üstünden, bir yol önceki tüm unsurları alıp saymak olurdu.

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

6

Tabloyu oluştururken bu verileri hücrelere gönderebilir misiniz?

tablonuz şöyle görünecektir:

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

o zaman basit bir mesele olurdu

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

1
Bu özellikler hangi html spesifikasyonlarına uyuyor? Onları bulamıyorum.
Samantha Branham

5
'Data-' önekiyle başlayan özel niteliklere izin veren HTML spec 5.
Chris Brandsma

teknik özellikleri olmasa bile eski tarayıcıları kırmayacak <HTML5
Daniel Powell

1
"Data" alanlarına şu numarayı kullanarak ulaşabilirsiniz: $ (this) .data ('row');
WhiteAngel

0

bir tıklama işleyiciyi tüm tabloya bağlamak ve sonra tıklanan TD'yi almak için event.target kullanmak daha iyidir. Bütün bu 1:20 duyuyorum buna ekleyebilirsiniz


Bu, sorunu çözmek için değerli bir ipucu olsa da, iyi bir cevap da çözümü gösterir. Ne demek istediğinizi göstermek için örnek kod sağlamak üzere lütfen düzenleyin . Alternatif olarak, bunun yerine yorum olarak yazmayı düşünün.
Toby Speight

1
teşekkürler, bu cevabı başka bir 10 yıl içinde gözden geçirmeyi düşüneceğim
mkoryak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.