Creating an HTML table using jQuery

Last month I battled how to create an HTML table using jQuery. It sounded simple and definitely possible to me but it took some time to get it to work. Since it took some time I wanted to write it out to keep notes for myself in the future and help others who might also be trying to do the same thing.

I wanted to use jQuery so that I could create a nice clean table with 50 rows without having to actually write out an HTML table with 50 rows in it (that would be painful and I would probably hate for anyone to actually look at it and see that’s how I got the 50 row table built in the first place). So jQuery was a logical solution. I knew I could use an array to loop through and create 50 rows but I had never done it before.

My table at first without jQuery:


And yep that’s just 3 rows … yikes!

My table using jQuery:


My 50 row table is shorter than the original 3 row table. So cool!

And here’s what the table looks like:




Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s