2009-11-21 67 views
12

我正在寻找一种很好的方式来获取表格中的单元格X-Y位置。 (不要将它与css-position混淆,我在直角坐标系中寻找X和Y坐标)。如何使用jQuery获取单元格(​​)x和y坐标?

正如我们所知,我们可以使用ex:$('#grid')[0].rows[5].cells[7]来获得表格中的特定单元格。

但是,如果我想获得价值5x7当我点击特定的细胞,即:

$('#grid td').click(function(){ 
    alert("My position in table is: " + myPosition.X + "x" + myPosition.Y); 
}); 

我想,最简单的方法就是innerHTML的,ID或CSS类添加到每一个细胞( <td class="p-5x7">等),当在后端创建表,然后解析它,并返回点击,但有什么办法来获得这些纯粹基于DOM的坐标?

回答

36

DOM级别2 HTML cellIndex

alert('My position in table is: '+this.cellIndex+'x'+this.parentNode.rowIndex); 
+4

嗯...是啊...我删除了我的答案,因为这个答案是可笑的比我好。 :-) 1+ – a432511 2009-11-21 13:43:57

+0

非常感谢!现在听起来很简单 – rochal 2009-11-21 13:52:05

+0

刚刚学到了新的东西......谢谢@bobince – 2009-11-21 17:34:10

0

window.onload = function() { 
 
    document.getElementsByTagName('table')[0].addEventListener('click', function(e) { 
 
    alert("My position in table is: " + e.target.parentElement.rowIndex + "x " + e.target.cellIndex + "y"); 
 
    }, false); 
 
}
tr, td { 
 
    padding: 0.6rem; 
 
    border: 1px solid black 
 
} 
 

 
table:hover { 
 
    cursor: pointer; 
 
}
<table id="grid"> 
 
    <tr> 
 
    <td>0, 0</td> 
 
    <td>0, 1</td> 
 
    <td>0, 2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>1, 0</td> 
 
    <td>1, 1</td> 
 
    <td>1, 2</td> 
 
    </tr> 
 
</table>