Jak znaleźć numer wiersza i kolumny komórki w tabeli

Question

Nie używając jQuery, jaki jest najskuteczniejszy sposób uzyskania wiersza i kolka (X, Y) z onClick nawet w tabeli?

Wydaje mi się, że przypisanie odbiorcy kliknięcia tylko do stołu i pozostawienie go na wierzchu będzie działało dobrze, ale tak naprawdę to po prostu daje mi HTMLTableElement. To, co chcę z niego uzyskać, to numer Col i numer wiersza od tego jednego słuchacza. Czy to jest możliwe?

window.onload = function() { 
document.getElementsByTagName('table')[0].addEventListener('click', function() { 
    alert(this.tagName); 
}, false); 
} 

Answer 1

Można powiązać do stołu, ale zostawi otwartą możliwość, że możesz kliknąć w odstępów między komórkami (który nie ma wiersza lub indeks komórkowy). Postanowiłem w poniższym przykładzie, że chciałbym związać się z komórkami, a tym samym zapewnić, że zawsze będę miał indeks wiersza i komórki.

var tbl = document.getElementsByTagName("table")[0]; 
var cls = tbl.getElementsByTagName("td"); 

function alertRowCell(e){ 
    var cell = e.target || window.event.srcElement; 
    alert(cell.cellIndex + ' : ' + cell.parentNode.rowIndex); 
} 

for (var i = 0; i < cls.length; i++) { 
    if (cls[i].addEventListener) { 
    cls[i].addEventListener("click", alertRowCell, false); 
    } else if (cls[i].attachEvent) { 
    cls[i].attachEvent("onclick", alertRowCell); 
    } 
} 

Demo: http://jsbin.com/isedel/2/edit#javascript,html

Przypuszczam można bezpiecznie wiązać z samym stole też, i przeprowadzić kontrolę w stosunku do elementu źródłowego, aby zobaczyć, czy to komórka czy nie:

var tbl = document.getElementsByTagName("table")[0]; 

function alertRowCell (e) { 
    var cell = e.target || window.event.srcElement; 
    if (cell.cellIndex >= 0) 
    alert(cell.cellIndex + ' : ' + cell.parentNode.rowIndex); 
} 

if (tbl.addEventListener) { 
    tbl.addEventListener("click", alertRowCell, false); 
} else if (tbl.attachEvent) { 
    tbl.attachEvent("onclick", alertRowCell); 
} 

Demo: http://jsbin.com/isedel/5/edit

Answer 2

window.onload = function() { 
document.getElementsByTagName('table')[0].addEventListener('click', function(e) { 
    alert(e.target); 
}, false); 
} 

Answer 3

Oto najprostszy sposób na zrobienie tego.

window.onload = function() { 
 
    document.querySelector('#myTable').onclick = function(ev) { 
 
    var rowIndex = ev.target.parentElement.rowIndex; 
 
    var cellIndex = ev.target.cellIndex; 
 
    alert('Row = ' + rowIndex + ', Column = ' + cellIndex); 
 
    } 
 
}

<table border="1" id="myTable"> 
 
    <tr> 
 
     <td>first row first column</td> 
 
     <td>first row second column</td> 
 
    </tr> 
 
    <tr> 
 
     <td>second row first column</td> 
 
     <td>second row second column</td> 
 
    </tr> 
 
    <tr> 
 
     <td>third row first column</td> 
 
     <td>third row second column</td> 
 
    </tr> 
 
</table>