Cross-browser AJAX updates to table elements
Published: June 29, 2008 (over 9 years ago)
Updated: over 2 years ago
<table id="mytable" style="border: 1px solid blue"> <tbody id="mytbody"> <tr id="row1"> <td>r1c1</td> <td>r1c2</td> <td>r1c3</td> </tr> <tr id="row2"> <td>r2c1</td> <td>r2c2</td> <td>r2c3</td> </tr> <tr id="row3"> <td>r3c1</td> <td>r3c2</td> <td>r3c3</td> </tr> <tr id="row4"> <td>r4c1</td> <td>r4c2</td> <td>r4c3</td> </tr> </tbody> </table>
Cut and paste that into a more complete HTML document if you’re gonna play with it. But as you can probably see, that code generates a fairly simple table with named table row elements and a named
tbody element (which is very important for IE). One of the first things I found out is that you can’t inject directly on the table element in IE, you have to inject into the TBODY element, otherwise, IE just accepts your injects gleefully without ever presenting them (I know this because I could subsequently select with
$('new_element') and delete the elements I dynamically created!). So now that we have that first big “gotcha” out of the way, lets look at some mootools functions you can use to mess with your tables. First, be sure you have mootools loading into your HTML document:
With this, I can put some buttons on the page to click and call these nifty functions accordingly:
<button onclick="add_row();">add row</button> <button onclick="delete_row();">delete row</button> <button onclick="replace_row('row2');">replace row 2</button>
So, lets go over this a bit.
delete_row() is the simplest one. It just shows that you can use mootool’s dollar function to grab a TR and throw it away. Works great in FF2 and IE without any tricks.
add_row(). This one turned out to be tricky because I was initially trying to add to the “mytable” TABLE element and it worked in Firefox, but not Internet Explorer. I really got frustrated with this one, trying all manner of innerHTML, outerHTML, DOM manipulators (e.g.
appendChild) with no success until Jan tipped me off that its the
tbody you have to work against.
Alright, so with that nasty one out of the way, the next step was getting rows into IE. It seems that just assigning innerHTML property for a TR was a major no-no and there’s plenty of blogs and other forum posts to tell you all about this one. But I get my new data from the server as HTML, not DOM objects. I needed a simple helper method to get me to DOM elements I could inject. So Jan whips up what I needed in
htmlToElements(str) function in which a a fully valid table is constructed (including the TBODY element IE depends on) in which the TR is selected and returned from it.
With a TR element in hand, it was embarrassingly simple to call mootool’s inject on the TBODY element. But wait, there’s a bonus round: You can also replace an existing TR just as easily as you can add a new TR to the table and Internet Explorer (or maybe it was mootools!) tickled me pink in happily complying with my wishes. With this toolset, you can build a fairly comprehensive set of functionality to add, delete, and update your rows in any browser.
a.k.a. Code Connoisseur
- ICQ ‐ 25239620
- AIM ‐ mwlang88
- Yahoo! ‐ mwlang88
- Google ‐ mwlang
- Twitter ‐ @mwlang88
EducationBachelor of Science
Information and Computer Science
- On Hiring Good People
- Week Five in the Gym
- The True Power of the Internet
- Rekindling a desire to workout consistently
- I'd Rather Eat my Britches than Do This
- Mold Killer Recipe
- Gonna be Starting Something New
- Pitch Camp, what is it good for?
- Less communication can be more
- Let the Musings Begin
- Working on a Referral Pre-Launch Site
- Making Commitments, Reaching Out
- Preparing for Countdown
- Ground Zero
- A Reflection of the Technologies Built Things With
- Dynamic Routing in Rails Revisited
- Creating Dynamic Routes at runtime in Rails 4
- Adding Google Analytics script to Sprockets
- Gems you should consider for every Rails projects
- Weak Password will get you Hacked!
- Status updating...