2009-11-21 3 views
12

Sto cercando un buon modo per ottenere la posizione X-Y delle celle in un tavolo. (non confonderlo con css-position, sto cercando coordinate X e Y nel sistema di coordinate cartesiane).Come ottenere celle (<td>) coordinate x e y nella tabella usando jQuery?

Come sappiamo, possiamo ottenere una cella particolare in una tabella utilizzando ex: $('#grid')[0].rows[5].cells[7].

Ma, che cosa se voglio ottenere il valore 5x7 quando clicco su cella particolare, vale a dire:

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

credo, il modo più semplice è quello di aggiungere innerHTML, ID o classe CSS per ogni cellula (<td class="p-5x7"> ecc.) Quando si crea una tabella nel back-end, quindi si analizza e si ritorna al clic, ma esiste un modo per ottenere queste coordinate basandosi esclusivamente su DOM?

risposta

36

DOM Level 2 HTML cellIndex:

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

Um ... sì ... ho cancellato la mia risposta perché questa risposta è ridicolmente migliore della mia. :-) 1+ – a432511

+0

grazie mille! sembra così semplice ora – rochal

+0

Ho appena imparato qualcosa di nuovo ... grazie a @bobince –

0

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>