 |  |  |  |  |  |  |  |
Add/Remove rows from Table
Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
Hi again,
I do not want to argue what is an error and what does not. I tried to show some of my programing experiences.
You may see that a short function check() does the work of input validation very efficiently because it does not give a chance the user to write down a wrong character. It could be, of course, used also 'off line', but when it is called on each key up, you can write the other part of code more simply because you can relay on the input.
I did not understand the request for filled/empty input, but as you cleared it now the IF condition (line 53) have to be cosmetically corrected to emulate the XOR operator. (done).
It is very popular to give any DOM element the id attribute and then look for it by very complicated computed way. In most cases if the user click on some element, you can refer directly to the that/enclosing/neighbor/enclosed element by use of this object reference this this.parentNode this.nextSibling ....
Also you can get a collection of elements of the same TAG. Hence if you want to work with all <INPUT type="text">s on a single row, where the user clicked the button, simply collect those inputs: and while walking through the collection, deal only with those which has the correct name, type, value or sequence number.
About the editing behavior – if one wants to edit a line, the text boxes must be enabled, hence, after the editing is finished, disable must take an effect. Thats why the button [ed] changes into the button [lock] and, in the same way the of ideas, only one row at the same moment can be edited, so other rows are disabled and the add/ed button, too. I forgot the possibility to delete the row at the moment of editing, but it was a minor repair :-) (done).
It is a good exercise to build the page completely by dynamic methodes createElement() appendNode() etc. But It must be pointed out, that browsers differs (not a bit) in interpreting such structure, but in the rendering the HTML they work more closely. So it was shown on the example. The 'prototype' row was completely written in HTML. They are some DOM elements which can be created more efficiently by dynamic code, but the table is not that case. Also you must take in account what I wrote elsewhere, that the registred function (glued to element by events onSomething) are not cloned if the registration is not made by HTML. There is some hack how to do that in FireFox but in MSIE I did not find a cheat.
I am not able to solve your task, because nobody pay me for the analyse, design, coding, debugging and user training. It is your deal. But I try to show some trick rather than guidelines how to do it efficiently :-)
If you allow me an advice: Do not let manipulate yoursef by the user in choosing the resources, algorithm, computational procedures, data structure, and other parts of the process insides. Do your own analyses and never argue if it is good or not to accept the financial model which can count only the positive numbers but differs between credit and debet. It is partially the Roman counting relict, because the Roman numbers were positive only, no zero, and addition and subtraction was not commutative operation! Remember: mathematic and computational science had made great progress from that time :-)
I do not want to argue what is an error and what does not. I tried to show some of my programing experiences.
You may see that a short function check() does the work of input validation very efficiently because it does not give a chance the user to write down a wrong character. It could be, of course, used also 'off line', but when it is called on each key up, you can write the other part of code more simply because you can relay on the input.
I did not understand the request for filled/empty input, but as you cleared it now the IF condition (line 53) have to be cosmetically corrected to emulate the XOR operator. (done).
It is very popular to give any DOM element the id attribute and then look for it by very complicated computed way. In most cases if the user click on some element, you can refer directly to the that/enclosing/neighbor/enclosed element by use of this object reference this this.parentNode this.nextSibling ....
Also you can get a collection of elements of the same TAG. Hence if you want to work with all <INPUT type="text">s on a single row, where the user clicked the button, simply collect those inputs:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
About the editing behavior – if one wants to edit a line, the text boxes must be enabled, hence, after the editing is finished, disable must take an effect. Thats why the button [ed] changes into the button [lock] and, in the same way the of ideas, only one row at the same moment can be edited, so other rows are disabled and the add/ed button, too. I forgot the possibility to delete the row at the moment of editing, but it was a minor repair :-) (done).
It is a good exercise to build the page completely by dynamic methodes createElement() appendNode() etc. But It must be pointed out, that browsers differs (not a bit) in interpreting such structure, but in the rendering the HTML they work more closely. So it was shown on the example. The 'prototype' row was completely written in HTML. They are some DOM elements which can be created more efficiently by dynamic code, but the table is not that case. Also you must take in account what I wrote elsewhere, that the registred function (glued to element by events onSomething) are not cloned if the registration is not made by HTML. There is some hack how to do that in FireFox but in MSIE I did not find a cheat.
I am not able to solve your task, because nobody pay me for the analyse, design, coding, debugging and user training. It is your deal. But I try to show some trick rather than guidelines how to do it efficiently :-)
If you allow me an advice: Do not let manipulate yoursef by the user in choosing the resources, algorithm, computational procedures, data structure, and other parts of the process insides. Do your own analyses and never argue if it is good or not to accept the financial model which can count only the positive numbers but differs between credit and debet. It is partially the Roman counting relict, because the Roman numbers were positive only, no zero, and addition and subtraction was not commutative operation! Remember: mathematic and computational science had made great progress from that time :-)
•
•
Join Date: Apr 2009
Posts: 83
Reputation: 
Solved Threads: 0
Junior Poster in Training
Sir.. u r real Champ..!! 
i dnt knw why u think tht i want to argue...?? i nvr thnk of it.. :O
thanx for the advice... i will surely work on it...!!!
kindly help me in ur code..
When i add a row for the frst time..and then delete it.. this disable the second row...!!!!
i m unable to enter float value in it...!!! and decimal must be enter once...!!!!!!
jst need little help... thnx..!!
i dnt knw why u think tht i want to argue...?? i nvr thnk of it.. :O
thanx for the advice... i will surely work on it...!!!
kindly help me in ur code..
When i add a row for the frst time..and then delete it.. this disable the second row...!!!!
i m unable to enter float value in it...!!! and decimal must be enter once...!!!!!!
jst need little help... thnx..!!
Last edited by nish123; Jul 1st, 2009 at 1:48 pm.
Shortly: [code]<input type="button" value="del" onClick="ed(this.parentNode.previousSibling.firstChild); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus();" disabled="true">[code]need to be replaced so:[code]<input type="button" value="del" onClick="ed(this); this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex ); sumus();" disabled="true">[code]
Such mistakes are product of adding features after the finish :-)
The programmer's rules says:
- by adding a piece of code, the mistake is always added, too
- by repairing the code, the mistake is added, too
- every code contents at least one mistake
- every code contents at least one useless instruction
-> every code could be reduced to one instruction useless mistake
Are you using decimal comma (',') or point ('.')? Correct the RegExp in the condition (e.g.: /[^\d\.]/) in the check() function, but after that the test will be much more week, because it allows type in the decimal point more time. But I hope it is possible to write the RegExp so clearly to fulfill the goal.
Such mistakes are product of adding features after the finish :-)
The programmer's rules says:
- by adding a piece of code, the mistake is always added, too
- by repairing the code, the mistake is added, too
- every code contents at least one mistake
- every code contents at least one useless instruction
-> every code could be reduced to one instruction useless mistake
Are you using decimal comma (',') or point ('.')? Correct the RegExp in the condition (e.g.: /[^\d\.]/) in the check() function, but after that the test will be much more week, because it allows type in the decimal point more time. But I hope it is possible to write the RegExp so clearly to fulfill the goal.
Oh sorry, I used the wrong form and the code was not formated. Hence once again: reaplace by this:
A note: if submitting the form, all disabled items will not be send, hence a short function is written to enable all <INPUT>s before submit().
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
A note: if submitting the form, all disabled items will not be send, hence a short function is written to enable all <INPUT>s before submit().
I think over the float input and found you can rewrite the check() function so: Hm, here you can see the difference between the parseFloat conversion and automatic one :-)
javascript Syntax (Toggle Plain Text)
•
•
Join Date: Apr 2009
Posts: 83
Reputation:
Solved Threads: 0
Junior Poster in Training
•
•
•
•
Originally Posted by sysel 
I think over the float input and found you can rewrite the check() function so:Hm, here you can see the difference between the parseFloat conversion and automatic one :-)javascript Syntax (Toggle Plain Text)
yes u r right sir... we cant send values of textbox on submit..until it is Disabled.. So instead of disabled.. can i use ReadOnly attribute.. that will decrease your coding to some extent..!!
your Delete as well as check function is working fine...!!!!
Now i m able to enter float value and decimal once at a time..!!but still i m not able to enter value which starts with decimal.. like(.11)
another thing i m going to use select tag.. does getELementByTagName('input') will accept 'select tag' as input tag..!!
i think no..!! m i right..??
As data of select box comes from database..!! where should i change to make it disable..!!!After Add..!!!
Values of textbox will pass only when when bothside total are same....!!!
So instead of OnKeyUp.. i want to to use Onclick...!!!
Value will add-up on clicking of Add button... because.. i case if you want to edit a field.. then by just writing the value you can make the total same...but i want tht every value should be locked..!! and update the total only when it got locked...!!
I m attaching of small view of my page.. i hope this will give you an Idea what i m want to make..!!
Thanks sir.. for such a great help..!!
There are some methodes I use frequently:
Be careful to distinguish between them
- first two give you collection of element even if only one or none was choosen,
- the third gives one only,
-- hence to work with one of a chooesen element can be done as
but
- the first can be aplied to any (sub)element
- the two others choose the element(s) from the whole document only
-- it must be taken in account at the beggining of the design: Id must be unique in the document, names (and tags, ofcourse) may repeat, if you make a good distribution into various forms or tables (rows).
Of course, gives collection of all <SELECT> elements in specified form.
The check() function may be thinked once over, but not sure when I reach the computer today again :-)
oElColl= object.getElementsByTagName('tagName'); oElColl=document.getElementsByName(elementName); oneElmt=document.getElementById(elementId);
- first two give you collection of element even if only one or none was choosen,
- the third gives one only,
-- hence to work with one of a chooesen element can be done as
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
oElColl[index].value .. .. oElColl[index].appendChild(...)
- the two others choose the element(s) from the whole document only
-- it must be taken in account at the beggining of the design: Id must be unique in the document, names (and tags, ofcourse) may repeat, if you make a good distribution into various forms or tables (rows).
Of course,
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
The check() function may be thinked once over, but not sure when I reach the computer today again :-)
Yes yes, very nice graphic layout. I always concentrate to the functionality, may be I got less graphic talent :-) But I can recognize the art. (I know about the CSS only that it exists, may be you can give me some lesson :-) )
1) I rewrote the check() function so: finally, it gives what you expectted
2) <SELECT> has somewhat other behavior of the <INPUT>. With the oElm.cloneNode(true) where <SELECT> is a subElement of oElm the <INPUT> preserve its value but <SELECT> get its default selected value. In your case it does not matter, but one have to know what to do.
3) I try to prepare to you an example code with a nice trick how to fill the <SELECT> element with <OPTION>s, But sorry, I must find it on my disk :-).
1) I rewrote the check() function so:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
2) <SELECT> has somewhat other behavior of the <INPUT>. With the oElm.cloneNode(true) where <SELECT> is a subElement of oElm the <INPUT> preserve its value but <SELECT> get its default selected value. In your case it does not matter, but one have to know what to do.
3) I try to prepare to you an example code with a nice trick how to fill the <SELECT> element with <OPTION>s, But sorry, I must find it on my disk :-).
•
•
Join Date: Apr 2009
Posts: 83
Reputation:
Solved Threads: 0
Junior Poster in Training
•
•
•
•
Originally Posted by sysel
Yes yes, very nice graphic layout. I always concentrate to the functionality, may be I got less graphic talent :-) But I can recognize the art. (I know about the CSS only that it exists, may be you can give me some lesson :-) )
1) I rewrote the check() function so:finally, it gives what you expecttedJavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
2) <SELECT> has somewhat other behavior of the <INPUT>. With the oElm.cloneNode(true) where <SELECT> is a subElement of oElm the <INPUT> preserve its value but <SELECT> get its default selected value. In your case it does not matter, but one have to know what to do.
3) I try to prepare to you an example code with a nice trick how to fill the <SELECT> element with <OPTION>s, But sorry, I must find it on my disk :-).
javascript Syntax (Toggle Plain Text)
This is my almost done code... i made few changes in it...but what problem i m facing now that it does not work on Firefox..!!
my bad luck..!! its showing weird behavior in firefox... like add button does nt disable for first time... when i click on it changes to edit button..!!i m attaching a screenshot of firefox view...!!!
Thanks Sir for your Support
Last edited by nish123; Jul 2nd, 2009 at 3:37 pm.
As I promised, I pulled out a piece of code and added it into the exaple, to show you a nice trick, how to create an option list very easy and clearly. As I added the <SELECT> column, it cause me to change somewhat the other routine, but I hope you can find and understand.
To show the powerful dynamic <OPTION> fill I adopted the function knockOut() for to trim the option list at each <SELECT> cleared of the used items. May be it is coded in 'lama' style, because in hurry :-) But for the understanding the javascript 1.2 it is sufficient. I hope.
I put here my version of code with a short PHP 'loader'. Your coding is very clear, good formated and commented. It gives you good chances to return back to your code and easy to repair it if necessary. Points for you! I see, I can easy introduce myself into the CSS from your code, too. Thanks.
To show the powerful dynamic <OPTION> fill I adopted the function knockOut() for to trim the option list at each <SELECT> cleared of the used items. May be it is coded in 'lama' style, because in hurry :-) But for the understanding the javascript 1.2 it is sufficient. I hope.
I put here my version of code with a short PHP 'loader'. Your coding is very clear, good formated and commented. It gives you good chances to return back to your code and easy to repair it if necessary. Points for you! I see, I can easy introduce myself into the CSS from your code, too. Thanks.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
|
Similar Threads
- DataGridView not reflecting changes to DataTable (C#)
- Add / remove table row. javascript (JavaScript / DHTML / AJAX)
- How to swap two rows of a table in a database using php (PHP)
- How do I add up all values of rows in a table??? (PHP)
- Add remove rows javascript problem.... (JavaScript / DHTML / AJAX)
- Cannot Access Control Panel or Add/Remove Programs!!! (Viruses, Spyware and other Nasties)
- Cant add/remove win components (Windows NT / 2000 / XP)
- Windows 2000 Add/Remove programs don't work... (Windows NT / 2000 / XP)
- Add or Remove Programs... Removed? (Windows NT / 2000 / XP)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: validation of Multiple forms in single page
- Next Thread: Enter text into newly created dynamic text box
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest JavaScript / DHTML / AJAX Posts
- Today's Posts
- Unanswered Threads
acid2 ajax ajaxcode ajaxexample ajaxhelp ajaxjspservlets animate array automatically beta box browser bug calendar captchaformproblem cart close codes column css cursor date debugger decimal dependent design disablefirebug dom download dropdown element embed engine enter error events ext file firefox focus form frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 iframe index java javascript javascripthelp2020 jawascriptruntimeerror jquery jsp libcurl listbox maps masterpage media menu microsoft mimic mp4 onmouseoutdivproblem onmouseover paypal pdf php player position post problem programming progressbar prototype redirect regex safari scale scriptlets scroll search security select software sql text textarea unicode w3c website window windowofwords windowsxp
