获取元素的表父

Question

我在表格中动态创建了一个带有类x的div。我怎样才能用JavaScript捕获这个div的表父类并给它一个特定的类？

通过tr和td父节点没有工作。有任何想法吗？

Answer 1

假设不涉及任何库。

function getNearestTableAncestor(htmlElementNode) {
    while (htmlElementNode) {
        htmlElementNode = htmlElementNode.parentNode;
        if (htmlElementNode.tagName.toLowerCase() === 'table') {
            return htmlElementNode;
        }
    }
    return undefined;
}

var table = getNearestTableAncestor(node);
if (table) {
    table.className += ' certain';
}

Answer 2

如果你有jQuery，这很容易。如果您的HTML是这样的：

<table>
  <tr><td><div class="mydiv">hi</div></td></tr>
</table>

然后你可以这样说：

$('div.mydiv').closest('table').addClass('someclass');

closest函数在DOM树中上升，直到它到达与您给出的选择器匹配的元素（在本例中为table）。

Answer 3

假设新的div已经插入到DOM树中，您可以使用jquery：

$(div_node).parents('table')[0].addClass('certain_class');

裸露的javascript可以做类似的事情，但是你必须编写一个循环来迭代每个.parentNode，测试它是否是一个表等...

Answer 4

使用jQuery如果您的HTML是这样的：

<table>
  <tr><td><div class="divClass">Content</div></td></tr>
</table>

然后你可以调用父表，如：

  

$（ 'div.divClass'）的父（）;

下面的代码将给出你的表格的HTML：

  

警报（$（ 'div.divClass'）的父（）的HTML（））;

您可以根据需要使用$('div.divClass').parent(); ...

干杯！

Answer 5

这是一个相对较旧的答案，但是现在我们有了.closest，它可以遍历元素直到找到表：

var td = document.getElementById('myTdElement');
var table = td.closest('table');
if (table) {
    table.className += ' certain';
}

兼容性：