Add a table by clicking button

[LewisReeder]

I am trying to allow a user to click an "Add" button and have an instance of the current table appear directly below. The addition table should be blank. The table allows an employee to create a correction to a timesheet for a given week but they may need make a correction for more than one week. There are also other tables in the page but I have made this one stand alone to allow such a feature. I really am not sure where to even begin. Any help would be greatly appreciated.

Thanks,
Lewis

 

[shakespeare5677]

Try using layers or labels and then changing their innerHTML property to put the table html into it.
-Max

 

[BillyRayPreachersSon]

I would use DOM methods for this. However, it is important to understand exactly what it is you want.

You say that you want to create "an instance of the current table", but go on to say it should be blank.

What do you mean by this? If it is blank, how is it an instance of the source table? Does it have the same number of columns? Of rows? Both? Neither? What does is have in common?

Also, how is it the "current" table? Do you have a single button / link in each table which the user will click to duplicate it?

Those finer (but yet somehow essential) points aside, onto the DOM methods.

You can use the "parentNode" property of each element to traverse up the tree, testing the "tagName" property to determine when you reach the table element.

Then you could use the "cloneNode" method to take a copy (optionally choosing whether to take all childNodes) - which you may or may not want to do, depending on the answers to the earlier questions.

Or, you may just want to use the "createElement" method to create your table, table body, rows, and cells, using the "appendChild" methods to add the elements.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[LewisReeder]

I apologize for being so vague. The setup is this...I have a table which includes the following: "Add" button, numerous text boxes, 2 drop down lists and a text area. The user may or may not have entered information into any of the fields. What I would like is for the user to click the Add button and have a blank table appear directly below to allow the user enter another record. Essentially a copy of the original table with all the fields empty, even if information was entered in the original table. The table allows the user to enter information pertaining to 1 week only, so if information is needed for multiple weeks I would like the add button to create a new table in the same page.

I am looking into the DOM methods now, but any additional information would be appreciated.