<TR> retrieve ID of <TABLE>?

[Muon]

Hi there,

I have what I think ought to be a fairly straightforward question here:

how can a table row access the ID assigned to the table in which it resides?

I tried using parentElement:

<TR onMouseOver="alert(this.parentElement.id);">

and parentNode:

<TR onMouseOver="alert(this.parentNode.id);">

but I guess I must have a mistake in my syntax somewhere because it didn't work! All I get is an empty alert box (I'm testing in IE 6.0).

Cheers!

[Muon]

I just read that parentElement is not supported by netscape.

I need to find a way to retrieve the id of a table from a mouseover event on a table row, that will work in ie5+ and netscape 6+.

Cheers!

[brothercake]

TR is not a direct child of TABLE; a table goes like this:

<table>
<tbody>
<tr>

as a miniumum; if you have TFOOT or THEAD that will also affect the relationship.

So given that you know the table's structure, you'll probably find that something like

trObj.parentNode.parentNode

finds the table; otherwise you can use a recursive functions - this would be much more reliable and scaleable; something like:

<tr onmouseover="findParentTable(this)">

then

var tableObj;
function findParentTable(trObj) {
tableObj = trObj.parentNode;
while(tableObj.tagName.toLowerCase()!="table"){
tableObj = tableObj.parentNode;
}
}

[Muon]

Nice one brothercake,

the recursive function works perfectly, thanks!

Do you know if parentNode is supported Xbrowser? I'm having difficulty finding any coherent documentation for it online.

[brothercake]

Well it works in ie5+ moz and opera 7; it's part of the standards, so all DOM-compliant browser should support it.

[jkd]

Originally posted by brothercake
otherwise you can use a recursive functions - this would be much more reliable and scaleable; something like:

<tr onmouseover="findParentTable(this)">

then

var tableObj;
function findParentTable(trObj) {
tableObj = trObj.parentNode;
while(tableObj.tagName.toLowerCase()!="table"){
tableObj = tableObj.parentNode;
}
}

That's iterative, not recursive. :p

Recursive would be:

function findParentTable(trObj) {
if (!trObj) return null;
if (trObj.nodeName.toLowerCase() == 'table') return trObj;
else return findParentTable(trObj.parentNode);
}

:)