Question

我正在构建一个不同的网站，下面是我的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>

这种标记在平铺的pastern中重复，以填充整个页面。类似的DIV可能是：

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

如果你还没有看到它，我会在整个页面中创建一大堆单元格，分类为DIV。现在，当用户点击一个单元格（其中一个<td>）时，我想得到它代表的符号：0, 1, 5。

在此示例中，0, 1, 5是ID为0的DIV，ID为1的DIV内的TR元素，最后是该TR元素中的单元格ID为5。我想编写一个javascript函数来获取这些坐标，但是我完全不知道要传递什么参数，而且我不知道如何摆脱坐标。

据我所知，一旦我可以将点击事件（？）传递给该函数，我可以查看<td>的父元素并获取其ID？

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

Answer 1

由于使用数字开始ID无效，我将提供不同的解决方案。

由于您的ID基本上是索引编号，因此您可以使用jQuery的.index()方法来获取所需内容。

在此测试： http://jsfiddle.net/hBarW/

$('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);
});

Answer 2

使用closest jQuery函数，该函数返回您指定的父元素。

像这样：

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

Answer 3

试

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

你可以测试它here.

更多关于.closest() here

Answer 4

简单的事情就是

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

但是你有一些问题..

您不能将数字作为ID
ID在DOM内部应该是唯一的......

使用jQuery获取单元格的“坐标”

4 个答案: