获取td的节点索引答案

【问题标题】：Get node index of td获取td的节点索引
【发布时间】：2017-07-29 01:50:58
【问题描述】：

如果我有一个像下面这样的身体...我知道如果我点击第一个单选，它会返回 1。如果我点击表格外部的单选，它会返回 2。但是当我点击嵌套表格的第一个td 它在两个警报中返回其索引加上'父级的 td 索引。如何仅返回应该为 2 的嵌套 td 索引？这只是一个动态构建的示例表结构，因此它几乎需要与任何表设计和任何 td 一起使用。

有什么建议吗？
这是我用来在用户单击 td 时返回索引的代码（我捕获输入、文本区域等的其他索引）：

        $("td").click(function (event) {
            var nodeIndex = $("td").index();
            var nodeName = $(this).get(0).nodeName
            alert(nodeName + "," + nodeIndex);
        });

这是示例正文：

<body>  
    <input type="radio" />
        <table class="parent_table">
            <tr>
                <td>
                    <table class="nested_table">
                        <tr>
                            <td>
                                Sample Text</td>
                            <td>
                                &nbsp;</td>
                        </tr>
                    </table>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
       <input type="radio" />
    </body>

【问题讨论】：

标签： jquery indexing html-table

【解决方案1】：

这是罪魁祸首，它调用了所有<td>s

var nodeIndex = $("td").index();

替换为：

var nodeIndex = $(this).index();

【讨论】：

@elckabnrs 抱歉，我可能还不清楚..第二个警报仍在冒泡。我需要禁止点击下方的 td。
我正在查看stackoverflow.com/questions/1967537/… 并尝试了 e.stopImmediatePropagation();还是不行。
如果我理解正确，您希望能够单击任何<td>，无论其深度如何，并通过其索引发出警报。这是正确的吗？

【解决方案2】：

表已经在td 上具有方便的属性cellIndex 和tr 上的rowIndex。这意味着您不需要使用 jQuery。

相反，尝试这样的事情（无论如何这更有效）：

// set ID "parent_table" on the parent table, then...
document.getElementById('parent_table').onclick = function(e) {
    e = e || window.event;
    var t = e.srcElement || e.target;
    while( t != this && (!t.tagName || t.tagName != "TD")) t = t.parentNode;
    if( t.tagName == "TD") {
        alert("You clicked on cell number "+t.cellIndex+" in row number "+t.parentNode.rowIndex);
    }
}

除了更高效之外，它还避免了您在使用 jQuery 时的困惑。当您单击代码中的嵌套 TD 时，实际上是在单击父表的 TD 以及嵌套的 TD，因此您会收到两个警报。在这里，你只会得到一个。

【讨论】：

这不是单元格索引，而是页面中 td 的层次结构，所以如果表格/页面中有 10 个 td，我点击第 8 个，它会返回 8。但是如果表格是在另一个表中，它选择单元格 8，然后是嵌套表的父单元格。
你仍然可以使用我的代码。只需替换alert 行，并找出变量t 中单元格的索引。因为事件处理程序只在一个元素上注册并一直运行到最近的表格单元格，所以每次单击此处仍然只会收到一个警报。

【解决方案3】：

解决了。我只是将 td 放入全局单击中，然后能够在一个事件中记录节点名和索引，从而消除了双重警报....

jQuery('td').live('click', function (event) {

    if (event.target.nodeName.toLowerCase() == "td") {
        var nodeIndex = $("td").index(this);
        var nodeName = $(this).get(0).nodeName
        alert(nodeName + "," + nodeIndex); 
    }

});

【讨论】：