javascript – 如何找到表中的单元格的行和列号

前端之家收集整理的这篇文章主要介绍了javascript – 如何找到表中的单元格的行和列号前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
不使用jQuery,甚至在表格中获取onClick的Row和Col(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",false);
} else if ( tbl.attachEvent ) {
  tbl.attachEvent("onclick",alertRowCell);
}

演示:http://jsbin.com/isedel/5/edit

猜你在找的JavaScript相关文章