如何查找表中单元格的行号和列号
How to find row and col number of a cell in table
不使用jQuery,即使在表中获取onClick的行和列(X,Y)的最有效方法是什么?
我认为将点击侦听器分配给表,并让它冒泡到顶部会很好,但实际上它只是给了我 HTMLTableElement。我想从中得到的是 Col 编号和来自这个侦听器的行号。这可能吗?
window.onload = function () {
document.getElementsByTagName('table')[0].addEventListener('click', function() {
alert(this.tagName);
}, false);
}
您可以绑定到表格,但这会使您在单元格之间的间距内单击(没有行或单元格索引)的可能性。在下面的示例中,我已决定绑定到单元格本身,从而确保我始终具有行和单元格索引。
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);
}
}
演示:http://jsbin.com/isedel/2/edit#javascript,html
我想您也可以安全地绑定到表本身,并对源元素执行检查以查看它是否是单元格:
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);
}
演示:http://jsbin.com/isedel/5/edit
这是最简单的方法。
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>
window.onload = function () {
document.getElementsByTagName('table')[0].addEventListener('click', function(e) {
alert(e.target);
}, false);
}
相关文章:
- 在表格单元格中查找超链接
- 如何查找具有行和列索引的特定单元格的内容
- 在没有jQuery的JavaScript中查找单击的表单元格的行和列
- 使用 Javascript 动态查找和编辑表格单元格
- 使用查询选择器查找同级行中包含的下一个单元格
- 如何查找表中单元格的行号和列号
- 通过单击任何单元格或表格数据及其左侧和顶部标题进行查找
- 为其中一个单元格或 td 查找 colSpan 标头是 Spans
- jq查询查找单元格值,如果存在则更改单元格,如果没有,则添加新行
- 在数组中查找单元格的更好解决方案
- 如何查找表中的值,然后在相邻单元格中获取数据
- 使用jQuery更高效的方式根据条件查找每个表行中的第n个单元格
- 查找表单元格的值
- 查找单元格内容是否多次出现
- 按ID查找表行并编辑其单元格
- 在数据表中查找特定单元格的值
- 只查找父表中的元素,而不查找其单元格中的子表
- 查找并用数据表插件替换单元格值
- 查找具有特定单元格值的行
- 使用nextUntil查找当前单元格的索引