Javascript 如何在表格中查找单元格的行号和列号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10494661/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to find row and col number of a cell in table
提问by Mark Tomlin
Not using jQuery, what is the most efficient way of getting the Row and Col (X, Y) of a onClick even within a table?
不使用 jQuery，即使在表中，获取 onClick 的 Row 和 Col (X, Y) 的最有效方法是什么？
I would think that assigning a click listener to just the table, and let it bubble to the top would work well, but really it just gives me the HTMLTableElement. What I want to get from it is the Col number, and Row number from this one listener. Is that possible?
我认为只为表格分配一个点击侦听器，然后让它冒泡到顶部会很好，但实际上它只是给了我HTMLTableElement。我想从中得到的是来自这个听众的列号和行号。那可能吗？
window.onload = function () {
document.getElementsByTagName('table')[0].addEventListener('click', function() {
alert(this.tagName);
}, false);
}
回答by Sampson
You could bind to the table, but that would leave open the possibility that you might click within the spacing between cells (which doesn't have a row or cell index). I have decided in the example below that I would bind to the cells themselves, and thus ensure I would always have a row and cell index.
您可以绑定到表格，但这会留下您可能在单元格之间的间距（没有行或单元格索引）内单击的可能性。我在下面的例子中决定我将绑定到单元格本身，从而确保我总是有一个行和单元格索引。
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
演示：http: //jsbin.com/isedel/2/edit#javascript,html
I suppose you could safely bind to the table itself too, and perform a check against the source element to see if it was a cell or not:
我想您也可以安全地绑定到表格本身，并对源元素执行检查以查看它是否是单元格：
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);
}
回答by Jazzzzzz
Here is the most simple way to do that.
这是最简单的方法。
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>回答by Musa
window.onload = function () {
document.getElementsByTagName('table')[0].addEventListener('click', function(e) {
alert(e.target);
}, false);
}
