कोशिकाओं को कैसे प्राप्त करें (<td>) एक्स और वाई jQuery का उपयोग कर तालिका में समन्वय?

Question

मैं एक टेबल में कक्ष एक्स-वाई स्थिति प्राप्त करने के लिए एक अच्छा तरीका ढूंढ रहा हूं। (इसे सीएसएस-स्थिति से भ्रमित न करें, मैं कार्टेशियन समन्वय प्रणाली में एक्स और वाई समन्वय की तलाश में हूं)।

जैसा कि हम जानते हैं, हम पूर्व: $('#grid')[0].rows[5].cells[7] का उपयोग कर तालिका में विशेष सेल प्राप्त कर सकते हैं।

लेकिन, क्या हुआ अगर मैं मूल्य 5x7 प्राप्त करना चाहते हैं जब मैं विशेष रूप से सेल पर क्लिक करें अर्थात्:

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

मुझे लगता है, सबसे आसान तरीका है हर कोशिका में जोड़ने के लिए innerHTML, आईडी या CSS वर्ग (है <td class="p-5x7"> इत्यादि) जब बैक एंड में टेबल बनाते हैं, तो उसे पार्स करें, और क्लिक पर वापस आएं, लेकिन क्या इन निर्देशांकों को पूरी तरह से डीओएम पर आधारित करने का कोई तरीका है?

Answer 1

डोम स्तर 2 एचटीएमएल cellIndex:

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>