Rather than building all the table HTML in a string and appending
that, you will have better luck if you start like this:
var $table = $('<table></table>');
Now, you want to add your heading row. It appears from your code that
you added the <th> without enclosing in a <tr>. I'll assume you meant
to do that. At this point, now that you have a handle on your table
element, you can continue to add via strings or by building jQuery
objects:
$table.append('<tr><th>...</th></tr>');
And continue building your table rows using the function you have:
$table.append(buildItemHTML(...));
Loop that, or whatever. Assuming that all the additions are complete
rows, there is no need to close the table tag, since you've appended
inside of the <table></table> you started with. At this point, $table
contains your complete DOM structure for your table, and you just add
it to your page the same way you did:
$('#container').append($table);
You'd used two line breaks after it, presumably for spacing. You have
a couple of options when you append:
$('#container').append($table,'<br /><br />');
$('#container').append($table).append('<br /><br />');
These are roughly the same, but the first method is probably more
preferable. This demonstrates that you can mix jQuery objects and
strings of HTML similar to the above where you built a jQuery object
representing the table but appended strings of HTML inside to build
the rows.
Another alternative would be to use CSS to add a margin-bottom to the
table instead of the (probably non-semantic) line breaks.
$('#container').append($table);
$table.css('marginBottom','2em');
This is another advantage of having a reference to $table ... you can
modify it's CSS at any point in your code; before, after or at once:
$('#container').append($table.css(...));
Ok, now you've got the table into the DOM on the page. Here's a method
for adding your zebra stripes:
var even = false;
$table.find('tr').each(function() {
if (even) $(this).addClass('even');
even = !even;
});
This will add the class "even" to every other table row. Then you can
use a css rule to style it:
table tr.even { background-color: gray; }
The beauty of this is that there is no particular order. You can add
the classes before appending the table to the DOM. As long as $table
is in scope you can manipulate this structure whether it's been
appended to the page or not. Many possibilities!
-Kelly
On May 28, 9:35 am, RachelG <rachelgat...@gmail.com> wrote:
> Hey Everybody!
>
> I'm having an issue that I really hope some nice person can give me a
> hand with. I am pretty new to Jquery and I'm really getting confused.
> I am currently working on this page:
>
> http://www.empirepatiocovers.com/MetroBlack-Patio-Covers1.aspx (FYI:
> a lot of the page functionality does not work. We will be adding
> proper functionality eventually)
>
> There is a dynamically placed table that is pulling data from our XML
> sheet. This works beautifully. However the page needs to ultimately
> look like this:
>
> http://www.empirepatiocovers.com/MetroBlack-Patio-Covers.aspx
>
> See how the table background colors alternate? There is an "even" and
> an "odd" css class that is being applied to alternating tr's. I found
> a code that would apply that effect, in this
> article:http://blog.jquery.com/2006/10/18/zebra-table-showdown/, but that
> script is being applied to a table that is already on the page. Since
> ours is being build dynamically, this script is not working for us.
> Essentially what I need to do is create some kind of event handler or
> an event listener applies the alternating css classes once the table
> is finished loading. I understand the logic, but I don't know how make
> it work.
>
> I have been trying to figure out a solution for about 3-4 hours now
> but I have hit a wall. Even my friend, who is an experienced developer
> can't figure this one out. He said the only other solution he can
> think of is to determine what tables are going to be even and odd in
> my XML and get my .js file to call that. I don't have a problem doing
> this, but I know it will be very tedious considering my XML sheet
> contains all of our products, and I'd like to find an easier way to do
> it.
>
> This is the link to my .js file:
> http://www.empirepatiocovers.com/javascript/readXML.js
>
> I really appreciate everyone's help and look forward to some
> responses! Thanks so much!
>
> - Rachel
