How do you dynamically create a new table using jQuery?

All I know is $("<myTable>").appendTo("#myDiv");

But I want to be able to specify an id for it (which was passed in the function) and then add rows and columns of it with text boxes inside for user input.

I attached an excel file to show what I need.

Thanks for your help.
sample-calcs.xls
Corinne_09Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

anoyesCommented:
Adding the ID attribute is relatively easy - you should be able to just do $('<myTable>').attr('id','table1').appendTo('#myDiv');

As for adding the rows/columns, it looks like you're doing an order form type deal where they click on a button and it appends a new row to the table.  What I usually do in this situation is to actually create the table and the first row in HTML, and then when the 'Add' button is clicked, it clones the last <tr> element and clears all the user input.  Is that a possible solution, or do you need to whole thing to be dynamically created?
0
Corinne_09Author Commented:
I'll need to be creating it dynamically, even the entire table itself. I have it working in Javascript, but I want my code to be cleaner and faster (if possible).
I'm basically creating the tables and the values are retrieved from a database.
I attached another excel file with new additions to it.
sample-calcs.xls
0
anoyesCommented:
OK, I think this is a start.  The columns are defined as a JS object, with properties name and type to help generate their ID and either static or input to determine whether we're putting a span in there that you can insert static content into or a textbox the user can enter data into.  The add/delete buttons should also add and delete rows accordingly.  I did this kinda quickly so it's probably not perfect but should be a start, and we'll see if I'm on the right track.

dynamic-tables.htm.txt
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Corinne_09Author Commented:
Thanks. It's a good start. I'll play around with it and I'll get back to you.
0
Corinne_09Author Commented:
Yes, this is working for me and it is a good start. Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.