Question

所以这应该很简单，但它似乎让我磕磕绊绊。我在桌子的一个单元格中有一个下拉列表。当该值改变时，我调用一个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;
}

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

Answer 1

因为您忘记了tbody元素（可选，但大多数，如果不是所有），浏览器会添加table来包装{{1尝试其他tr：

parentNode

JS Fiddle demo

你真的不需要遍历每个变量的function updateData(select) { // select -> td -> tr -> tbody -> table var table = select.parentNode.parentNode.parentNode.parentNode; var row = select.parentNode.parentNode; var cell = select.parentNode; }：

table

JS Fiddle demo

假设您希望坚持使用纯JavaScript，并且不希望在检索元素时手动迭代DOM，这里是function updateData(select) { var td = select.parentNode, tr = td.parentNode, tbody = tr.parentNode, table = tbody.parentNode; }的简单JavaScript实现：

closest()

JS Fiddle demo

Answer 2

大卫托马斯的回答可能是最好的答案。虽然如果你的页面上有jQuery，你也可以使用'nearest（）'函数。

$(select).closest('table')

这将考虑自动添加tbody容器的浏览器，以及不支持的浏览器。

从单元格数据中获取表格

2 个答案: