Hücreler (<td>) jQuery kullanılarak tablodaki x ve y koordinatları nasıl alınır?

Question

Bir tabloda hücrelerin X-Y konumunu almanın iyi bir yolunu arıyorum. (css-pozisyonu ile karıştırmayın, Kartezyen koordinat sisteminde X ve Y koordinatlarını arıyorum). Bilindiği gibi, belirli bir hücreyi bir tablodan ex: $('#grid')[0].rows[5].cells[7] kullanarak alabiliriz. Ben değeri 5x7 almak istiyorsanız ben özellikle hücreyi tıkladığına

Ama yani:

sanırım

$('#grid td').click(function(){ 
    alert("My position in table is: " + myPosition.X + "x" + myPosition.Y); 
}); 

, en kolay yolu (her hücreye innerHTML, kimliği veya CSS sınıfı eklemektir <td class="p-5x7"> vs.) arka uçta tablo oluştururken, onu ayrıştırın ve tıklamaya geri dönün, ancak bu koordinatları yalnızca DOM'a dayalı olarak almanın bir yolu var mı?

Answer 1

DOM Düzey 2 HTML cellIndex: Bu yanıt benim daha gülünç iyidir çünkü

alert('My position in table is: '+this.cellIndex+'x'+this.parentNode.rowIndex); 

Answer 2

window.onload = function() { 
 
    document.getElementsByTagName('table')[0].addEventListener('click', function(e) { 
 
    alert("My position in table is: " + e.target.parentElement.rowIndex + "x " + e.target.cellIndex + "y"); 
 
    }, false); 
 
}

tr, td { 
 
    padding: 0.6rem; 
 
    border: 1px solid black 
 
} 
 

 
table:hover { 
 
    cursor: pointer; 
 
}

<table id="grid"> 
 
    <tr> 
 
    <td>0, 0</td> 
 
    <td>0, 1</td> 
 
    <td>0, 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1, 0</td> 
 
    <td>1, 1</td> 
 
    <td>1, 2</td> 
 
    </tr> 
 
</table>