Webmaster Forum / HTML, CSS, Scripts / JavaScript / June 2006

It falls over in Firefox at this line:

 var headerRow = divContent.childNodes[0].childNodes[0].childNodes[0];

Navigating down the dom tree using childNode references is doomed to
fail in most cases, as some browsers (e.g. Firefox) include text nodes
for whitespace that others (e.g. IE) don't.  The required element may
be childNodes[0] in IE but will likely be childNodes[1] in Firefox (and
other Gecko-based browsers).  I'll guess that the expected sequence is:

 divContent -> table -> tbody -> row

If such navigation is necessary, it is better to use:

 var headerRow = divContent.getElementsByTagName('someTag')[0]...

to skip unwanted nodes.  I'll take a punt that in this case:

 var headerRow = divContent.getElementsByTagName('table')[0].rows[0];

or even:

 var headerRow = divContent.getElementsByTagName('tr')[0];

will do the job.  You may need to fix it elsewhere too.

You may want to write a function that gets a particular instance of a
certain childNode type:  getChild(<element>, <nodeName>, <index>) so
you might have something like (pure guesswork here):

 var headerRow = getChild(
                   getChild(divContent, 'table', 0), 'tr', 0);

or

 var headerRow = getChild(divContent, 'table', 0).rows[0];

It is also a good idea in IE too, as someone may introduce a node that
the script isn't expecting.  You could also get the childNodes
collection and skip across the siblings looking for a particular
instance of a certain node type.

There is a script that does a similar thing here (don't expect any help
though):

 <URL:http://www.litotes.demon.co.uk/example_scripts/tableScroll.html>

PS.  Removing any whitespace in the source HTML between tags navigated
using childNodes may fix the issue with no change to the script.