ArticlesLinksMake a PayPal Contribution to remove Script CopyWrite notices or for Non-Commercial use!
All scripts are licenced:
|
Dynamic Tables with DOMAfter 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. Commentswww: Very cool, thanx. 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 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.
- 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. badotz: This line:
-
- if((cell = theCell.parentNode) && (thisRow = cell.parentNode)) {
-
- is surely wrong. Shouldn't it be:
-
- if((cell == theCell.parentNode) && (thisRow == cell.parentNode)) { 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. 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) 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. 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
- > 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. Troy Compton: This is a great exampleWhere is the file tabledom.js? I didnt see it. Thanks Will: Thanx Troy,
- http://www.coastworx.com/tabledom.js Matt: Great piece of code Will.
- Well done Matt: Hi Will
-
- Can you please post your results.php file?
-
- Thanks. 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. Will: Update: Forms action is now results.html and some demo data included to the form Matt: Thanks Will 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! 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 >.< 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
- I want to be able to the calculate the number of hours employees work in the form of monday - friday and then a total at the end of the row for each task they work on. Is there a way that you can evaluate the total for each row and then a total for all rows? 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!
|