[Javascript] strange gecko (firefox/mozilla) appendchild behavior

[Robert Van Dam]

Take a look at these and tell me why the first one acts funny in
firefox/mozilla:

http://rvandam.com/test_appendchild.html

http://rvandam.com/test_appendchild2.html

I have a table (of actual raw data) that is being generated
dynamically but is relatively expensive to generate.  I wanted to make
it possible to sort the rows by clicking on the column header but
without going back to the server or requiring me to cache the entire
page.

So I dynamically generate js objects containing all the relevant data
and I got sorting working very cleaning using
mytable.appendChild(myrow) to rearrange the rows after I had resorted
them.  That all worked great, but here's the problem:

After the _second_ time you sort, firefox (2.0 on linux and 1.5 on
windows) and mozilla (1.7) mysteriously lose the borders on all of the
newly rearranged cells (plus some of the header ones that didn't
move).

I finally tracked down (thanks to firefox's dom inspector) that I was
generating a new tbody each time (because otherwise ie doesn't show
any of the rows) and for some reason firefox/mozilla don't seem to
apply stylesheet rules of the form "table td" to dynamically generated
rows that are in the third or later tbody.  However, it works fine in
konqueror and ie (6 and 7).

Since I've already fixed it I don't know if anyone will bother
responding but the "why" still has me perplexed.  Anyone have any
clues?  I'm not getting anything useful out of google at the moment.

(After a little more experimentation, it is only dynamically generated
tbodies that have this problem, a table with several static tbodies
has css applied just fine).