Ajax with tables

There may be an easy solution, but I just can’t seem to get this to

I’m using tables for part of my site, as they contain a lot of rows and
columns full of financial data, so just working with div’s and dd’s…
won’t do.
My table structure is pretty simple, as follows:


name date

Now, I’m trying to use ajax to insert additional TR’s to the top of the
“items” table.
This works absolutely perfect, only if I omit the TR’s that contain the

I can’t seem to find a way to update the list at the top, and have the
be inserted “below” the TH’s.

Seems like a common task to push something on the top of a table, but
darn table headings is messing up my whole schtic :slight_smile:
Any ideas would be greatly appreciated.

give the header row an id like ‘header’ and insert the new tr’s after

In this case, the TR is added “directly” below the TR with an id of
‘header’, which contains the table headers.
So, it ends up rendering like:

As you can see, it doesn’t add after the entire element, but after the
declaration, as the TH elements are nested within the TR.

this new TR inserted here. doh !
name date

A slight change in table to add a thead for the header cells would not
only make your task easier, but also offer improvements to your users
(ie: when printing).


<%= render :partial => 'item', :collection => @items %>
Name Date


<%= item.name %> ==========

With a table set up this way you can insert the partial into the top of
“insert-here” with a “page.insert_html :top, :partial => ‘item’” using
RJS (for example).

Hot damn Colin… that did it :slight_smile:

I thought I read somewhere that not all browsers support the
thead/tbody/tfoot syntax… but “not all browsers” is probably a very
term anyway.
I’m not a “web designer” per se… and obviously need to read up on
structures :slight_smile:

Thank you very much Colin !!