Làm thế nào để tìm hàng và col số một ô trong bảng

Question

Không sử dụng jQuery, cách hiệu quả nhất để tận dụng Row và Col (X, Y) của một onClick thậm chí trong một bảng là gì?

Tôi sẽ nghĩ rằng chỉ định một người nghe nhấp chuột vào bảng, và để cho nó bong bóng lên đầu sẽ hoạt động tốt, nhưng thực sự nó chỉ mang lại cho tôi HTMLTableElement. Những gì tôi muốn nhận được từ nó là số Col, và số Row từ người nghe này. Điều đó có thể không?

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

Answer 1

Bạn có thể liên kết với bàn, nhưng điều đó sẽ để ngỏ khả năng mà bạn có thể nhấp vào trong vòng khoảng cách giữa các tế bào (mà không có một hàng hoặc chỉ số tế bào). Tôi đã quyết định trong ví dụ dưới đây rằng tôi sẽ liên kết với các tế bào thân, và do đó đảm bảo tôi sẽ luôn luôn có một chỉ số hàng và tế bào.

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

Tôi cho rằng bạn có thể yên tâm liên kết với các bảng riêng của mình quá, và thực hiện một kiểm tra chống lại các yếu tố nguồn để xem nếu nó là một tế bào hay không:

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

đây là cách đơn giản nhất để làm điều đó.

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>