 |  |  |  |  |  |  |  |
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
 |
•
•
Join Date: Apr 2009
Posts: 83
Reputation: 
Solved Threads: 0
Junior Poster in Training
•
•
•
•
Originally Posted by sysel 
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.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
but have to notice.. the brand u select once does not come for second time..!! i means once u select 'Water'option...it does not
come in second Row..!!
javascript is very confusing
php Syntax (Toggle Plain Text)
Sir this is my php code in comment with query...
how can i implement there..in in place of array.....??
Thanks Sir..!!
•
•
Join Date: Apr 2009
Posts: 83
Reputation:
Solved Threads: 0
Junior Poster in Training
and one more thing.. when i send data... the BRAND array shows blank..!! i dont knw why..??
Last edited by nish123; Jul 3rd, 2009 at 3:46 am.
I am bac again :-)
-- the brand u select once does not come for second time......
yes, this is the feature maden by the knockOut() function, if not wanted, rewrite the function as this:
and in the add(oRow) function you must delete the instruction:
-- the empty brand[] array ... as I told, all the 'inputs' must be enabled what I forgot, where I used the attribute disabled, you may have the readonly. In my code add the enabling loop for <SELECT> elements in the send() function:
-- the $arrBrand filling code looks correct, I hope, that the keys are unique :-)
With the javascript you can also enable the [add] button on the extended condition that the 'brand' must be selected, too.
-- the brand u select once does not come for second time......
yes, this is the feature maden by the knockOut() function, if not wanted, rewrite the function as this:
function knockOut(formChild) {} and in the add(oRow) function you must delete the instruction:
selN.length = 1; -- the empty brand[] array ... as I told, all the 'inputs' must be enabled what I forgot, where I used the attribute disabled, you may have the readonly. In my code add the enabling loop for <SELECT> elements in the send() function:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
-- the $arrBrand filling code looks correct, I hope, that the keys are unique :-)
With the javascript you can also enable the [add] button on the extended condition that the 'brand' must be selected, too.
•
•
Join Date: Apr 2009
Posts: 83
Reputation:
Solved Threads: 0
Junior Poster in Training
•
•
•
•
Originally Posted by sysel
I am bac again :-)
-- the brand u select once does not come for second time......
yes, this is the feature maden by the knockOut() function, if not wanted, rewrite the function as this:
function knockOut(formChild) {}
and in the add(oRow) function you must delete the instruction:
selN.length = 1;
-- the empty brand[] array ... as I told, all the 'inputs' must be enabled what I forgot, where I used the attribute disabled, you may have the readonly. In my code add the enabling loop for <SELECT> elements in the send() function:JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
-- the $arrBrand filling code looks correct, I hope, that the keys are unique :-)
With the javascript you can also enable the [add] button on the extended condition that the 'brand' must be selected, too.
javascript Syntax (Toggle Plain Text)
Sir i dont knw what is happening... again the code creating problem in Firefox...!!!!
But i will not loose the hope..!!
Last edited by peter_budo; Jul 4th, 2009 at 6:09 am. Reason: Correcting code tags
•
•
Join Date: Apr 2009
Posts: 83
Reputation:
Solved Threads: 0
Junior Poster in Training
•
•
•
•
Originally Posted by sysel
I am bac again :-)
-- the brand u select once does not come for second time......
yes, this is the feature maden by the knockOut() function, if not wanted, rewrite the function as this:
function knockOut(formChild) {}
and in the add(oRow) function you must delete the instruction:
selN.length = 1;
-- the empty brand[] array ... as I told, all the 'inputs' must be enabled what I forgot, where I used the attribute disabled, you may have the readonly. In my code add the enabling loop for <SELECT> elements in the send() function:JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
-- the $arrBrand filling code looks correct, I hope, that the keys are unique :-)
With the javascript you can also enable the [add] button on the extended condition that the 'brand' must be selected, too.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
Sir i dont knw what is happening... again the code creating problem in Firefox...!!!!
But i will not loose the hope..!!
Last edited by nish123; Jul 3rd, 2009 at 7:29 am.
Hi,
I hope your code needs a minor repair only:
- somehow disappeared the <BODY> & <FORM ..> headings
- the send() function was not extended: - a cosmetic cleaning could be: in add(oRow)
- the
It is highly recommended to use frequently in FireFox the Error console (or whatever it has English name) and the DOM Inspector (available as free FF plugin). Lot of people use the FireBug plugin for direct debugging of the JavaScript code.
The database exploit seems to be well coded I hope it makes no problems.
I must again admit, that the styled document looks much better than the 'technical' skeleton only :-)
I hope your code needs a minor repair only:
- somehow disappeared the <BODY> & <FORM ..> headings
<BODY><form method="post" action="./ThePage.php"> where ./ThePage.php should be overwritten with correct destination page name;- the send() function was not extended:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
- the
<TABLE> ... </TABLE> definitely MUST be unformated in the code -> written as one single row, because, each [formating | invisible] character as spaces, tabs, and end of line can brake the structure of the DOM (Document Object Model) inserting the unwanted #text elements, hence the relative reference of the type: oElement.parentNode.nextSibling.firstChild reffers to the invisible character instead of the next <INPUT> box.It is highly recommended to use frequently in FireFox the Error console (or whatever it has English name) and the DOM Inspector (available as free FF plugin). Lot of people use the FireBug plugin for direct debugging of the JavaScript code.
The database exploit seems to be well coded I hope it makes no problems.
I must again admit, that the styled document looks much better than the 'technical' skeleton only :-)
•
•
Join Date: Apr 2009
Posts: 83
Reputation:
Solved Threads: 0
Junior Poster in Training
•
•
•
•
Originally Posted by sysel
Hi,
I hope your code needs a minor repair only:
- somehow disappeared the <BODY> & <FORM ..> headings
<BODY><form method="post" action="./ThePage.php">where ./ThePage.php should be overwritten with correct destination page name;
- the send() function was not extended:- a cosmetic cleaning could be:JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
- the<TABLE> ... </TABLE>definitely MUST be unformated in the code -> written as one single row, because, each [formating | invisible] character as spaces, tabs, and end of line can brake the structure of the DOM (Document Object Model) inserting the unwanted #text elements, hence the relative reference of the type:oElement.parentNode.nextSibling.firstChildreffers to the invisible character instead of the next <INPUT> box.
It is highly recommended to use frequently in FireFox the Error console (or whatever it has English name) and the DOM Inspector (available as free FF plugin). Lot of people use the FireBug plugin for direct debugging of the JavaScript code.
The database exploit seems to be well coded I hope it makes no problems.
I must again admit, that the styled document looks much better than the 'technical' skeleton only :-)
i want that if u didnt select any option from dropdown..u cant add row..!!! where should i made change..!!
even i change the value of add and del button... to Add items and Delete items... function shows error..!!!!
Sir have to notice that... if u fill values and dont add row.. still your values got passed to next page...!! think to solve this instead of onkeyup..i should use Onclick function to update the total... total got update only when user click the add button..and same in case of edit and lock button...!!!
One more important thing i want to ask... Does it effect the Dom structure when i create new table over your's table(ur code)...
or intserting the rows of your's table into another table....??? does functionality got effected by it..????
Sir can u provide some Good tutorials to understand DOM structure more clearly...!!
Thank u..!!
Last edited by nish123; Jul 4th, 2009 at 1:23 am.
As I am leaving home for some days:
- the total is processed by the sumus() fc. Pick the function call to this fc. out of the fc. emptyStr(oRow), and and do not forget to append it into ed(oBut)
- in fc. emptyStr(oRow), collect the 'select' element in the same way as the 'input' elements are collected, and add the condition oSelS[0].value != "" into the if(...) statement
- the table core (from <tbody> ... </tbody>) can be moved anywhere in the document and styled as is possible with CSS, you must only keep it compact in ought the realtive refferences remain in force
there may be even more copy of this table in the document but you must decide, if you want to submit values from all tables or one only, to include all tabs in one single <FORM> or each tab in its own <FORM>
- while changing the value of the button, you must change the all the apperance of the value use, because some times the code tests the values, the most clever is put in the head of scripts the var addButtValue='Add an Item', edButtValue='Edit this Row', ... etc and then be able to change values globaly
Try to catch the program structure by identifying the modules and drawing the 'flow chart' and then you can experiment w. modifying the modules and changing the relation between them. While making the changes in some function, make a copy and change its name somewhat, and you can quickly see the result with clear way to return back to original state :-)
The code must be yours, I gave you the suggestion only :-) hence I left in my suggestion the disabled attribute even I admit that the use of readonly attr. is better, you are free to change it on your purposes :-)
- the total is processed by the sumus() fc. Pick the function call to this fc. out of the fc. emptyStr(oRow), and and do not forget to append it into ed(oBut)
- in fc. emptyStr(oRow), collect the 'select' element in the same way as the 'input' elements are collected, and add the condition oSelS[0].value != "" into the if(...) statement
- the table core (from <tbody> ... </tbody>) can be moved anywhere in the document and styled as is possible with CSS, you must only keep it compact in ought the realtive refferences remain in force
there may be even more copy of this table in the document but you must decide, if you want to submit values from all tables or one only, to include all tabs in one single <FORM> or each tab in its own <FORM>
- while changing the value of the button, you must change the all the apperance of the value use, because some times the code tests the values, the most clever is put in the head of scripts the var addButtValue='Add an Item', edButtValue='Edit this Row', ... etc and then be able to change values globaly
Try to catch the program structure by identifying the modules and drawing the 'flow chart' and then you can experiment w. modifying the modules and changing the relation between them. While making the changes in some function, make a copy and change its name somewhat, and you can quickly see the result with clear way to return back to original state :-)
The code must be yours, I gave you the suggestion only :-) hence I left in my suggestion the disabled attribute even I admit that the use of readonly attr. is better, you are free to change it on your purposes :-)
•
•
Join Date: Apr 2009
Posts: 83
Reputation:
Solved Threads: 0
Junior Poster in Training
•
•
•
•
Originally Posted by sysel
As I am leaving home for some days:
- the total is processed by the sumus() fc. Pick the function call to this fc. out of the fc. emptyStr(oRow), and and do not forget to append it into ed(oBut)
- in fc. emptyStr(oRow), collect the 'select' element in the same way as the 'input' elements are collected, and add the condition oSelS[0].value != "" into the if(...) statement
- the table core (from <tbody> ... </tbody>) can be moved anywhere in the document and styled as is possible with CSS, you must only keep it compact in ought the realtive refferences remain in force
there may be even more copy of this table in the document but you must decide, if you want to submit values from all tables or one only, to include all tabs in one single <FORM> or each tab in its own <FORM>
- while changing the value of the button, you must change the all the apperance of the value use, because some times the code tests the values, the most clever is put in the head of scripts the var addButtValue='Add an Item', edButtValue='Edit this Row', ... etc and then be able to change values globaly
Try to catch the program structure by identifying the modules and drawing the 'flow chart' and then you can experiment w. modifying the modules and changing the relation between them. While making the changes in some function, make a copy and change its name somewhat, and you can quickly see the result with clear way to return back to original state :-)
The code must be yours, I gave you the suggestion only :-) hence I left in my suggestion the disabled attribute even I admit that the use of readonly attr. is better, you are free to change it on your purposes :-)
Earlier i tried to add new row in beginning for column headers.. and thts creating problem.. i think that interrupting the DOM structure..!!
So i create separate table headers in seprate table..!!
I found DOM.. little Complex but really interesting...!!
Now i m trying when user fills value in one textbox,the other textbox got disable...!! instead of add button... how is the Idea..?
and on edit only that textbox enable which contains Value and dropdown...!!!
I wish i can also play with DOM like You..! lolzz
Last edited by nish123; Jul 4th, 2009 at 7:09 am.
hi i also face this problem 1year back bcz i too developed accts package, it was in jsp,javascript iam sending the code plz check
save the below code in .jsp file and run u will get Ans: before that plz go through the code once and follow the comments....all the best
even if u save with .html also it's work but before that have to delete some lines.. if u have any queries ask bcz i know..i face so much prblm with that
save the below code in .jsp file and run u will get Ans: before that plz go through the code once and follow the comments....all the best
even if u save with .html also it's work but before that have to delete some lines.. if u have any queries ask bcz i know..i face so much prblm with that
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
Last edited by sharao; Jul 5th, 2009 at 2:42 am.
|
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 ajaxexample ajaxjspservlets array browser bug captchaformproblem cart checkbox child class close codes createrange() css cursor date debugger decimal dependent design disablefirebug dom dropdown editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gxt hiddenvalue highlightedword hint html ie7 ie8 iframe images index internet java javascript javascripthelp2020 jquery jsf jsfile jsp jump libcurl listbox maps masterpage math media menu mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php position post problem programming progressbar prototype redirect runtime safari scale scriptlets scroll search security shopping size software toggle unicode w3c web wysiwyg \n
