Umer Pasha Blogs

www.umerpasha.com

jQuery append, prepend, before, after functions for inserting rows in HTML table

on November 1, 2012

I have been using jQuery extensively for the past couple of years or so. Mostly to add visual effects to my own site at http://www.umerpasha.com.

Unfortunately, due to shortcomings of Microsoft Sharepoint that my client uses as a portal builder, a lot of patchwork needs to be done on forms using jQuery as well. Mostly, it works well for cross-browser compatibility so I hardly check for cross-browser compatibility when working with Sharepoint/jQuery mostly because the portal is on an intranet and IE is the preferred browser for sharepoint anyway. In this particular case, they needed certain pages for public viewing pertaining to a show/event.

I have been using jQuery to insert rows at will between sharepoint edit forms to put in labels and headings and to change the look and feel of the form if required. I have always used append and prepend jQuery functions to do that.

So to add a heading “About You” after a certain textbox I will put in:
var str = ‘<tr><td width=”190″ class=”ms-formlabel” noWrap=”nowrap” vAlign=”top” ><FONT Color=”Red”>ABOUT YOU</FONT></td><td width=”400″ class=”ms-formbody” vAlign=”top”><span dir=”none”><input type=”hidden” name=”lblAboutYou” title=”lblAboutYou” class=”ms-long” id=”lblAboutYou”  /></td></tr>’;
$(‘input[title=StudentID]’).parent().parent().parent().append(str);

To add a heading after a certain textbox I will use “append” the same way.

So it turns out what “append” does is, APPEND (duh!) the HTML text WITHIN the TR tag. So in the following example, if I want to add a TR with id=3, i used to write the above code to insert row 3, finding row 2 and appending it.

<TR id=1>…</TR>
<TR id=2>…</TR>
<TR id=4>…</TR>

Turns out, this is WRONG! What is needed is this:
<TR id=1>…</TR>
<TR id=2>…</TR>
<TR id=3>…</TR>
<TR id=4>…</TR>

What actually happens is this:

<TR id=1>…</TR>
<TR id=2>… … … .. .  <TR id=3>…</TR>  </TR>
<TR id=4>…</TR>

 

As you can see, the new row is BETWEEN the TR tags of row 2. I never noticed this because of….. drumroll please….. IE!!! (Isn’t it always the case?????)

1. IE forgives you for having a totally blasphemous structure like above! It treats TR 3 as a separate row.

2. If you turn on “Inspect” tool (using F12) in IE, it freakin’ does not show you the ending tags!!!

So because of those 2 reasons I never got to know what monster i was creating!

So I create the page using the above wrong code and it messes up in firefox and chrome big time. No fault of jQuery though. Append is doing what it should…. APPENDING it!

So if you are in such a rut…. use jQuery functions “AFTER” and “BEFORE”.

Here is the correct code using the same str variable value as above and reaching the parent TR:

$(‘input[title=Name]’).parent().parent().parent().parent().after(str);

<TR id=1>…</TR>
<TR id=2>…</TR>
<TR id=3>…</TR>
<TR id=4>…</TR>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: