Javascript 获取'；坐标'；a<；TD>；使用jQuery的单元格

我正在建设一个不同的网站，下面是我的HTML标记和我的问题。请不要被这堵文字墙吓倒，我相信这对那些知道自己的东西的人来说真的不是一个难题，但需要一些解释

<div id="0" class="cell" style="top: 0px; left: 0px;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tbody>
            <tr id="0">
                <td id="0">&nbsp;</td>
                <td id="1">&nbsp;</td>
                <td id="2">&nbsp;</td>
                <td id="3">&nbsp;</td>
                <td id="4">&nbsp;</td>
                <td id="5">&nbsp;</td>
                <td id="6">&nbsp;</td>
                <td id="7">&nbsp;</td>
                <td id="8">&nbsp;</td>
                <td id="9">&nbsp;</td>
                <td id="10">&nbsp;</td>
                <td id="11">&nbsp;</td>
                <td id="12">&nbsp;</td>
                <td id="13">&nbsp;</td>
                <td id="14">&nbsp;</td>
                <td id="15">&nbsp;</td>
            </tr>
            <tr id="1">
                <td id="0">&nbsp;</td>
                <td id="1">&nbsp;</td>
                <td id="2">&nbsp;</td>
                <td id="3">&nbsp;</td>
                <td id="4">&nbsp;</td>
                <td id="5">&nbsp;</td>
                <td id="6">&nbsp;</td>
                <td id="7">&nbsp;</td>
                <td id="8">&nbsp;</td>
                <td id="9">&nbsp;</td>
                <td id="10">&nbsp;</td>
                <td id="11">&nbsp;</td>
                <td id="12">&nbsp;</td>
                <td id="13">&nbsp;</td>
                <td id="14">&nbsp;</td>
                <td id="15">&nbsp;</td>
            </tr>
        </tbody>
    </table>
</div>

为了填满整个页面，该标记以平铺的方式重复。类似的DIV可能是：

<div id="1" class="cell" style="top: 144px; left: 0px;">
    <!-- The rest of the table code here... -->
</div>

如果您还看不到，我将在整个页面上创建一个单元格负载，并将其排序为div。现在，当用户点击一个单元格（一个

）时，我想得到它的坐标，表示为：

0,1,5

在本例中，

0,1,5

是id为

0

的DIV，该DIV内id为

1

的TR元素，最后是id为

5

的TR元素内的单元格。我想编写一个javascript函数来获得这些坐标，但我完全不知道要传递哪些参数，也不知道如何获得坐标

从我所能想到的角度来看，一旦我可以将一个点击事件（？）传递给函数，我就可以查看

的父元素并获取它们的ID

如果有人能提供此问题的解决方案或提供任何输入，我们将不胜感激。

使用jQuery函数，它将返回您指定的父元素

像这样：

$("td").click(function () {
   var parentDIVId = $(this).closest("div").attr("id");
   var parentTRId = $(this).closest("tr").attr("id");
   var myId = $(this).attr("id");
}

试一试

你可以测试一下

---

更多关于

简单的事情是

$('td').click(function(){
 $this = $(this);
 alert( $this.closest('div').attr('id') + ',' + $this.closest('tr').attr('id') + ',' + $this.attr('id'));
});

但是你有一些问题

不能将数字作为ID

ID在DOM中应该是唯一的

---

由于ID开头使用数字是无效的，因此我将提供不同的解决方案

因为您的ID基本上是索引号，所以可以使用jQuery的

.index（）

方法来获取所需的内容

在此处测试：

---

是 啊伟人。。只是您不需要jquery来获取

this

的id，只需执行

this.id

。。。好多了……）最后你错过了一个

）

。真的。为了保持一致性，我把它保持在这样的状态。这是一个完美的工作方式，除了我自己修正的一个小语法错误：D非常感谢！很高兴.=）您应该解决Gaby在下面提到的问题。我不担心有效的标记，所以我不介意在DOM中使用重复的ID:）@VIVA LA NWO如果您不关心编写准确的代码，为什么要在这里发布？请记住，ID以数字开头是无效的。可能会给您带来问题。ID也应该是唯一的。我不认为这会成为一个问题，但它可以。回答得很好，帕特里克，+1。我还发现有一个

cellIndex

和

rowIndex

：

var td_idx=this.cellIndex，tr_idx=this.parentNode.rowIndex

@Doug-哇，太棒了！我不知道。谢谢你提供的信息o） 这里有一个使用这些属性的更新：sweet！当我发现这件事时，我觉得“太棒了！”：）

$('td').click(function(){
 $this = $(this);
 alert( $this.closest('div').attr('id') + ',' + $this.closest('tr').attr('id') + ',' + $this.attr('id'));
});

$('td').click(function(){
    var $th = $(this);
    var td_idx = $th.index();
    var tr_idx = $th.closest('tr').index();
    var div_idx = $(this).closest('div').index();
    alert(td_idx + ' ' + tr_idx + ' ' + div_idx);
});