Dynamic Tables with DOM

After doing the usual searches on the net I was surprised to find I could not get an existing script that could add and delete rows dynamically.....well the way I wanted anyway.

This is my first attempt at manipulating tables using dom and have put together this script from code I've dug up from other sites and forum searches.

Basically by clicking the + or - buttons will either add or delete the selected row.
Adding a row uses the cloneNode method to copy the current row and its form elements and places the new row directly below it preserving the form elements values.
This is noteworthy when it comes to cross browser compatability especially preserving values of textareas and select box's.
I've tested successfully with IE6 and FireFox 2.0, thats good enough for me at this stage to keep the code simple enough and clean.

Hopefully this script will be found useful to you and if so please post a comment below. Script is available by viewing the source code.

09-November, 2007 Update:

Script is now an external js file "tabledom.js".
Form element names are now appended in descending order whenever a table row is added or deleted. Click the submit button to see the result display.

DateEventLocationCity CommentsEdit

Comments

Will: Hi badotz. - No, the line is correct, the statement is actually evaluating wether theCell.parentNode is an object....not if cell equates to theCell.parentNode.
(21.08.2007, 12:59)

Nicolae Mogoreanu: WTF. I've spent 5 minutes searching for the link to download the .js file. Or you expect us to view page source and extract the code?
(01.09.2007, 09:16)

Phill: Is this compatible with asp.net 2.0
(01.11.2007, 03:26)

phill: Managed to get it working in asp.net 2.0 Creates clones - however when I click on the '-' button I get a message saying that I cannot remove the first row (when there are two rows present)
(01.11.2007, 05:47)

Will: The script is client-side Javascript, so it runs in a browser and is compatible with any server-side language. - - It is set to not allow remove first row otherwise you would have to refresh the page to retrieve it. All rows under the first can be added/deleted.
(01.11.2007, 20:07)

phill: Sorry I did not explain properly. I cloned the row so that there were two identical rows but it would not let me remove the cloned row. I am guessing it has something to do with the initialisation of the number counter
(05.11.2007, 04:33)

Will: If your implementation does not let you delete a newly created row then there is possibly a mis-coding in the way you have implemented it. The script increments the elements name attribute when a new element(input) is added. Make sure you don't have space in the element/s name. See: function updateName(oName). If you are happy to allow deletion of all rows you could modify function deleteRow(theCell). I can take a look,drop me an email.
(06.11.2007, 21:55)

Markus Boc: > Nicolae Mogoreanu: WTF. I've spent - > 5 minutes searching for the link - > to download the .js file. Or you - > expect us to view page source and - > extract the code? - - You're an idiot, it's obvious how to get to the file. If it took you 5min to get your FREE code, maybe you should stop programming.
(04.06.2008, 05:00)

Troy Compton: This is a great exampleWhere is the file tabledom.js? I didnt see it. Thanks
(15.07.2008, 18:15)

Will: Thanx Troy, - http://www.coastworx.com/tabledom.js
(15.07.2008, 21:23)

Matt: Great piece of code Will. - Well done
(23.07.2008, 02:00)

Matt: Hi Will - - Can you please post your results.php file? - - Thanks.
(23.07.2008, 04:02)

Will: Matt, the results page is php by extension only...the results are parsed in this example using javascript: view the source code of results.php to get the code and save it as results.html. - Set the forms action to results.html.
(24.07.2008, 09:42)

Will: Update: Forms action is now results.html and some demo data included to the form
(24.07.2008, 09:58)

Matt: Thanks Will
(25.07.2008, 02:17)

15 of 20 comments (part 1) [ » ] [ * ]

Your comment:

Name:
E-mail or homepage:
Enter Turning Number: