从单元格数据中获取表格

Get the table from cell data

本文关键字：获取 表格 数据 单元格      更新时间：2023-09-26

所以这应该很简单，但它似乎让我绊倒了。我在桌子的一个单元格里有一个下拉菜单。当该值更改时，我调用一个javascript函数，并在函数中传递该下拉列表。我该怎么从那里拿到桌子？示例代码：

<table><tr>
<td>DATA</td>
<td><select id='leadState' onChange='updateData(this)'><option selected='selected' value='new'>New</option><option value='old'>Contacted</option></select></td>
</tr>
</table>

javascript:

function updateData(select) {
    var table = select.parentNode.parentNode.parentNode;
    var row = select.parentNode.parentNode;
    var cell = select.parentNode;
}

为什么这不能正确地返回表格？

因为您忘记了tbody元素（这是可选的，但如果不是所有的话，大多数浏览器都会添加到table来包装tr元素。请尝试另一个parentNode:

function updateData(select) {
                // select -> td  -> tr      -> tbody   -> table
    var table = select.parentNode.parentNode.parentNode.parentNode;
    var row = select.parentNode.parentNode;
    var cell = select.parentNode;
}

JS Fiddle演示。

并且您真的不必遍历每个变量的table：

function updateData(select) {
    var td = select.parentNode,
        tr = td.parentNode,
        tbody = tr.parentNode,
        table = tbody.parentNode;
}

JS Fiddle演示。

假设您希望坚持使用纯JavaScript，并且在检索元素时不希望手动迭代DOM，下面是closest():的简单纯JavaScript实现

HTMLElement.prototype.closest = function (selector) {
    var self = this.length ? this[0] : this;
    while (self.tagName.toLowerCase() !== selector.toLowerCase() && self.tagName.toLowerCase() !== 'body') {
        self = self.parentNode;
    }
    return self.tagName.toLowerCase() == 'body' ? this : self;
}
function updateData(select) {
    var td = select.closest('td'),
        tr = select.closest('tr'),
        table = select.closest('table');
    console.log(td, tr, table);
}

JS Fiddle演示。

David Thomas的答案可能是最好的答案。尽管如果您的页面上有jQuery，您也可以使用"closest（）"函数。

$(select).closest('table')

这将考虑到自动添加tbody容器的浏览器和不添加的浏览器。

相关文章：