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.
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.
www: Very cool, thanx.
Sonya: this oni clones it by interface.
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.
Will: Sonya, when a table row is addedd the new table elements are added to the DOM tree.
badotz: This line:
Will: Hi badotz.
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?
Phill: Is this compatible with asp.net 2.0
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)
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
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.
Markus Boc: > Nicolae Mogoreanu: WTF. I've spent
Troy Compton: This is a great exampleWhere is the file tabledom.js? I didnt see it. Thanks
Will: Thanx Troy,
Matt: Great piece of code Will.
Matt: Hi Will
Will: Update: Forms action is now results.html and some demo data included to the form
Matt: Thanks Will
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..
Will: hi, check to make sure your table structure is valid....barring that send me the table html code you are using.
vinod: very good and handy script
Matt: Hi Will
Will: Hi Matt, not really related to the script but certainly can be done. Cycle thru the tables dom elements with a loop checking the cell values and update target cells as required. Normally you would use the onChange event attached to each field element to fire the totals update.
Matt: Thanks Will, I will give it a shot!
Suman Kumar: It is nice script bt. bt where is script. can i download it?
sharlin: tabledom.js download this suman
Rishi: your site is awesome man....
pavan: hi friend where is main page? means for the display where is main page?how it should be?
pavan: ok ok i got everything.. so are simply great.... thanks a lot...
admin: VERY GOOD