Javascript - child nodes

[Tr3nt]

Hopefully someone knows - I can't seem to find anything, but will keep searching.

So basically I have a block of code, contained within an element:

<table>...</table>
<table>...</table>
<table>...</table>
<hr />
<table>...</table>
<table>...</table>
<table>...</table>
<hr />
..etc

And within each of those elements is a shit load more tables etc.

I have been calling element.GetElementsByTagName("table"); but this returns all tables, not just the super tables as above (which are the only ones I want).

So is there a way, to grab only those tables?

Any help is much appreciate, thanks

[mordy]

i reckon you can test the tables parent tag, if its body, than its a super table ... otherwise its an inner table.

[Dogo]

if you can use something like jQuery it will make life a lot easier.
jQuery ( and many other Javascript helper libraries ) will let you query and return nodes using a syntax based on CSS.

eg in jQuery you would get just the top level child tables with:

element.children('table')

or you can do the same by referencing the top level element by ID (or any other css-compatible method) with:

$('#elementID > table')

Without a JS library you would need to traverse the child nodes manually.

var topLevelTables = new Array();

// loop through all immediate descendants
for ( var i in element.childNodes )
{
    // is it a table ?
    if( element.childNodes[i].nodeName == 'TABLE' )
    { // then add it to the list
        topLevelTables.push( element.childNodes[i] );
    }
}

[Tr3nt]

Thats a good idea - thanks for tips guys

Well, I am not using jQuery in this case, but i'll keep it in mind for future Dogo

Just out of curiosity, in your for loop, the variable i isn't given some int value, is it?

As, I would of thought this:

if( element.childNodes[i].nodeName == 'TABLE' )

should be:

if( i.nodeName == 'TABLE' )

[nathanblogs]

http://docs.jquery.com/Traversing/closest
and
http://docs.jquery.com/Traversing/parent

might be of help

[Dogo]

actually I realise now that a " for .. in " statement isn't appropriate here.
It can iterate through childNodes as an object rather than an array, maybe it is depending on your browser ?

This will get you the index numbers but ALSO the array's member variables ( such as .length )

ie this:

for ( i in element.childNodes )
{
    alert(i);
}

will give 8 msgboxes: "0" , "1" , "2" , "3" , "4" , "5" , "length" , "item"

( presuming you have 6 sub-tables and I'm testing in FF 3.5 )


if it were a "normal" array, you would get just the index numbers, not the object reference as you had suggested. JS is odd in that way.



Anyway, you should rather use :

for ( var i = 0; i < element.childNodes.length; i++ )

Well I learnt something today