# Ajax with tables

**URL:** <https://www.ruby-forum.com/t/ajax-with-tables/78227>\
**Category:** Rails\
**Created:** [March 8, 2006, 6:43am UTC](https://www.ruby-forum.com/t/ajax-with-tables/78227 "2006-03-08T06:43:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Dylan\_S](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/34f0e0/32.png) [@Dylan\_S](https://www.ruby-forum.com/u/Dylan_S)\
**Post date:** [March 8, 2006, 6:43am UTC](https://www.ruby-forum.com/t/ajax-with-tables/78227/1 "2006-03-08T06:43:58Z")

</div>

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

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…  
etc,  
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  
TH’s.

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

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

---

<div class="post-metadata">

**Author:** ![Dylan\_S](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/34f0e0/32.png) [@Dylan\_S](https://www.ruby-forum.com/u/Dylan_S)\
**Post date:** [March 8, 2006, 6:50am UTC](https://www.ruby-forum.com/t/ajax-with-tables/78227/2 "2006-03-08T06:50:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Dylan\_S](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/34f0e0/32.png) [@Dylan\_S](https://www.ruby-forum.com/u/Dylan_S)\
**Post date:** [March 8, 2006, 7:17am UTC](https://www.ruby-forum.com/t/ajax-with-tables/78227/3 "2006-03-08T07:17:16Z")

</div>

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 |
| --- | --- |

---

<div class="post-metadata">

**Author:** ![Dylan\_S](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/34f0e0/32.png) [@Dylan\_S](https://www.ruby-forum.com/u/Dylan_S)\
**Post date:** [March 8, 2006, 7:21am UTC](https://www.ruby-forum.com/t/ajax-with-tables/78227/4 "2006-03-08T07:21:13Z")

</div>

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).

# view.rhtml
 \<%= render :partial =\> 'item', :collection =\> @items %\> 

| Name | Date |
| --- | --- |

==========
# \_item.rhtml
 \<%= 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).

---

<div class="post-metadata">

**Author:** ![Dylan\_S](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/d/34f0e0/32.png) [@Dylan\_S](https://www.ruby-forum.com/u/Dylan_S)\
**Post date:** [March 8, 2006, 7:29am UTC](https://www.ruby-forum.com/t/ajax-with-tables/78227/5 "2006-03-08T07:29:18Z")

</div>

Hot damn Colin… that did it 🙂

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

Thank you very much Colin !!