Every HTML element in DOM has reference to its parent node. With simple iteration it’s possible to traverse up to requested element. If this loop is wrapped within a function, you will get a very useful code.
/** * Function returns reference of named parent element * @param {String} tagName Tag name of requested parent element * @param {HTMLElement} el Initial element (from which search begins) * @return {HTMLElement} Returns reference of found parent element */ function findParent (tagName, el) { // loop up until parent element is found while (el && el.nodeName !== tagName) { el = el.parentNode; } // return found element return el; };
DOM hierarchically is organized like a tree and every element has defined parent node. So, with this function is very easy to find a TABLE for any TD (table cell) element. Here is how:
// search for a TABLE HTML element (from table cell reference) var tbl = findParent('TABLE', cell);
Instead of HTML reference as start element, function can be modified to accept element ID. In that case, you will have to use document.getElementById() method before loop starts.