Articles

Links

All scripts are licenced:
Creative Commons 3.0 -NonCommercial

Valid HTML 4.01 Transitional


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

www: Very cool, thanx.
(21.04.2007, 07:34)

Sonya: this oni clones it by interface.
I click the + and there is 2 rows in the interface here. But when check the source code of the form, there is only 1 <tr> found which is the exisiting
(17.05.2007, 04:40)

Anonym: This is very nice and what I was looking. I want to simply copy a previous row for multiple use and this does it.
(17.05.2007, 18:34)

Will: Sonya, when a table row is addedd the new table elements are added to the DOM tree.
If you view the DOM tree by placing an alert message in the script or in FFox using the DOM inspector you can see the new tr element.
(19.05.2007, 20:55)

badotz: This line:

if((cell = theCell.parentNode) && (thisRow = cell.parentNode)) {

is surely wrong. Shouldn't it be:

if((cell == theCell.parentNode) && (thisRow == cell.parentNode)) {
(21.08.2007, 09:20)

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, 11: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, 08:16)

Phill: Is this compatible with asp.net 2.0
(01.11.2007, 02: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, 04: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, 19: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, 03: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, 20: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, 04:00)

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

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

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

Matt: Hi Will

Can you please post your results.php file?

Thanks.
(23.07.2008, 03: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, 08:42)

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

Matt: Thanks Will
(25.07.2008, 01:17)

vampy: erm...hi..
i've tried ur code but it seems that i can delete the 1st row when it's the only row left..which part should i check?

thanks ^^
great piece of code!
(18.11.2008, 21:30)

vampy: btw..i've added 1 more row above the headers..i think that's the problem..is there any way that i can fix this?since i need that row above the headers..
sorry if im a noob >.<
(18.11.2008, 21:42)

Will: hi, check to make sure your table structure is valid....barring that send me the table html code you are using.
(19.11.2008, 08:21)

vinod: very good and handy script
(30.01.2009, 07:43)

shalo: There are read several good stuff in this article. Undoubtedly price saving regarding revisiting. I actually amaze just how much attempt you determine to create this kind of great beneficial website.
(27.07.2014, 07:23)

Your comment:

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