У меня такой html
<table>
<tr>
<td>
<img src="logo.png" onclick="getNextTableNode(this)">
</td>
</tr>
</table>
<table></table>
Я могу получить кулак tableNode с кодом js
function getNextTableNode(imgNode)
{
tableNode1 = imgNode.parentNode.parentNode.parentNode;
}
но как я могу получить следующий tableNode? Я не хочу использовать идентификатор или имя. Я пытался:
tableNode2 = tableNode1.nextSibling;
но это не сработало. Может кто-нибудь помочь? Спасибо заранее
Браузер добавляет узел <tbody>
в dom, независимо от того, был ли он включен в html. Для получения элемента таблицы вам понадобится дополнительный .parentNode
.
Когда у вас есть элемент таблицы, используйте nextElementSibling
:
tableNode2 = tableNode1.nextElementSibling;
Используйте nextSibling
как nextSibling
для старых браузеров:
tableNode2 = tableNode1.nextElementSibling || tableNode1.nextSibling;
()
. Это не метод.
Создайте пару утилит для получения предка и брата по имени тега:
function closestParent(node, tag) {
tag = (tag + "").toUpperCase();
while (node && (node = node.parentNode) && node.nodeName !== tag)
;
return node;
}
function nextSibling(node, tag) {
tag = (tag + "").toUpperCase();
while (node && (node = node.nextSibling) && node.nodeName !== tag)
;
return node;
}
Затем используйте утилиты:
function getNextTableNode(node) {
return nextSibling(closestParent(node, "table"), "table");
}
Это обеспечивает очень широкую совместимость с браузером.
$(imgNode).closest('table')
и$(imgNode).closest('table').next()
.