JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

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
Reply
1 2 Last »

•
•
Join Date: Apr 2009
Posts: 83
Reputation: nish123 is an unknown quantity at this point 
Solved Threads: 0
nish123's Avatar
nish123 nish123 is offline Offline
Junior Poster in Training

Add/Remove rows from Table

 
0
  #1
Jun 30th, 2009
Hello Frndz i m in complete mess...

i have to a table with Add/Remove rows features...
it should look like this -

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. textbox1 | textbox2 | Add Button

after clicking the add button Row will append and Disable the textbox with values...!!!

It looks like this after clickin Add Button..

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. textbox1 disabled | textbox1 disabled | Edit/Delete button
  2. textbox2 | textbox2 | Add Button

Any Help will be appriciated..!!
Last edited by nish123; Jun 30th, 2009 at 6:03 am.
Reply With Quote Quick reply to this message  
•
•
Join Date: Mar 2007
Posts: 686
Reputation: sillyboy is on a distinguished road 
Solved Threads: 61
sillyboy's Avatar
sillyboy sillyboy is offline Offline
Practically a Master Poster

Re: Add/Remove rows from Table

 
0
  #2
Jun 30th, 2009
cool, so where is the code?
http://www.happypolla.com
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 83
Reputation: nish123 is an unknown quantity at this point 
Solved Threads: 0
nish123's Avatar
nish123 nish123 is offline Offline
Junior Poster in Training

Re: Add/Remove rows from Table

 
0
  #3
Jun 30th, 2009
yeah i m also asking for the code only..!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 197
Reputation: ayesha789 is an unknown quantity at this point 
Solved Threads: 3
ayesha789's Avatar
ayesha789 ayesha789 is offline Offline
Junior Poster

Re: Add/Remove rows from Table

 
0
  #4
Jun 30th, 2009
please Check my thread which will give you idea that how to show edit and delete Button for all records. and Last code of the thread show the dtat in textfields and u can update each recodrd,
if helpful then mark thread as Solved.
Here is a link
http://www.daniweb.com/forums/thread199644.html
Ayesha
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 83
Reputation: nish123 is an unknown quantity at this point 
Solved Threads: 0
nish123's Avatar
nish123 nish123 is offline Offline
Junior Poster in Training

Re: Add/Remove rows from Table

 
0
  #5
Jun 30th, 2009
Ayesha..
It is useful thread...but i want it in javascript....!!! i m making a small accounting web application.. i want it to enter multiple transactions...!!!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 49
Reputation: sysel is an unknown quantity at this point 
Solved Threads: 3
sysel sysel is offline Offline
Light Poster

Re: Add/Remove rows from Table

 
0
  #6
Jun 30th, 2009
Here you are the code:
HTML Syntax (Toggle Plain Text) 
  1. <HTML><HEAD>
  2. <META http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <TITLE>add/ed/del row</TITLE>
  4. <script>
  5.  
  6. function add(oRow) 
  7. { oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
  8.   var inpN = oRow.nextSibling.getElementsByTagName('input');
  9.   var inpR = oRow.getElementsByTagName('input');
  10.   for(var i=0;i<inpR.length;i++)
  11.   { if(inpN[i].disabled)inpN[i].disabled=false;
  12.     if(inpR[i].type=='text')inpR[i].disabled=true;
  13.     if(inpR[i].value=='add')inpR[i].value='ed';
  14.   };
  15. }
  16. function ed(oRow)
  17. { var inpR = oRow.getElementsByTagName('input');
  18.     for(var i=0;i<inpR.length;i++)
  19.   { inpR[i].disabled=false;
  20.   }
  21. }
  22. </script>
  23. </HEAD>
  24. <BODY><form method="post" action="./finalPage.php">
  25. <table><tbody><tr><td><input type="text" name="row[txt1][]"></td><td><input type="text" name="row[txt2][]"></td><td><input type="button" value="add" onClick="(this.value=='add')?add(this.parentNode.parentNode):ed(this.parentNode.parentNode)"></td><td><input type="button" value="del" onClick="this.parentNode.parentNode.parentNode.deleteRow(this.parentNode.parentNode.rowIndex)" disabled="true"></td></tr></tbody></table>
  26. </form><br>
  27.  
  28. </BODY>
  29. </HTML>
But! What will you do with the data after the formula is fulfilled? Is the data to be processed at the same page using another JavaScript? or there have to be a button for sending the data to a process page?
You asked for the change the button "add" into the "edit". What will you do after you'll be finished with the row editing? Could not be the "ed" button change into the "lock" button while editing the row?

Think it over, before you start to code and asking the help!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 49
Reputation: sysel is an unknown quantity at this point 
Solved Threads: 3
sysel sysel is offline Offline
Light Poster

Re: Add/Remove rows from Table

 
0
  #7
Jun 30th, 2009
As I am takinkg off the Internet, I drop down here the revised code:
HTML Syntax (Toggle Plain Text) 
  1. <HTML><HEAD>
  2. <META http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <TITLE>add/ed/del row</TITLE>
  4. <script>
  5.  
  6. function add(oRow) 
  7. { oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
  8. //  var inpN = oRow.nextSibling.getElementsByTagName('input');
  9.   var inpR = oRow.getElementsByTagName('input');
  10.   for(var i=0;i<inpR.length;i++)
  11.   { if(inpR[i].disabled)inpR[i].disabled=false;
  12.     if(inpR[i].type=='text')inpR[i].disabled=true;
  13.     if(inpR[i].value=='add')inpR[i].value='ed';
  14.   };
  15. }
  16. function ed(oBut)
  17. { var inpR = oBut.parentNode.parentNode.getElementsByTagName('input');
  18.   for(var i=0;i<inpR.length;i++)
  19.   { if(oBut.value=='ed' && inpR[i].type=='text')inpR[i].disabled=false;
  20.     if(oBut.value=='lock' && inpR[i].type=='text')inpR[i].disabled=true;
  21.   } if(oBut.value=='ed'){oBut.value='lock'}else{oBut.value='ed'}
  22. }
  23. function send(oForm)
  24. { var inpF = oForm.getElementsByTagName('input');
  25.   for(var i=0;i<inpF.length;i++)
  26.   { inpF[i].disabled=false;
  27.   } oForm.submit();
  28. }
  29. </script>
  30. </HEAD>
  31. <BODY><form method="post" action="./fuj.php">
  32. <table><tbody><tr><td><input type="text" name="row[txt1][]"></td><td><input type="text" name="row[txt2][]"></td><td><input type="button" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) "></td><td><input type="button" value="del" onClick="this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex )" disabled="true"></td></tr></tbody></table>
  33. <br><input type="button" value="send" onClick="send(this.form)">
  34. </form><br>
  35. <?php print_r($_POST["row"])?>
  36. </BODY>
  37. </HTML>
Save the page as the fuj.php and it shows you what you had input before send (if you have PHP module enabled on your server, of course).
See you after some hours :-)
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 83
Reputation: nish123 is an unknown quantity at this point 
Solved Threads: 0
nish123's Avatar
nish123 nish123 is offline Offline
Junior Poster in Training

Re: Add/Remove rows from Table

 
0
  #8
Jun 30th, 2009
•
•
•
•
Originally Posted by sysel View Post
As I am takinkg off the Internet, I drop down here the revised code:
HTML Syntax (Toggle Plain Text) 
  1. <HTML><HEAD>
  2. <META http-equiv="content-type" content="text/html; charset=UTF-8">
  3. <TITLE>add/ed/del row</TITLE>
  4. <script>
  5.  
  6. function add(oRow) 
  7. { oRow.parentNode.replaceChild(oRow.cloneNode(true ),oRow.parentNode.insertRow(oRow.rowIndex+1));
  8. //  var inpN = oRow.nextSibling.getElementsByTagName('input');
  9.   var inpR = oRow.getElementsByTagName('input');
  10.   for(var i=0;i<inpR.length;i++)
  11.   { if(inpR[i].disabled)inpR[i].disabled=false;
  12.     if(inpR[i].type=='text')inpR[i].disabled=true;
  13.     if(inpR[i].value=='add')inpR[i].value='ed';
  14.   };
  15. }
  16. function ed(oBut)
  17. { var inpR = oBut.parentNode.parentNode.getElementsByTagName('input');
  18.   for(var i=0;i<inpR.length;i++)
  19.   { if(oBut.value=='ed' && inpR[i].type=='text')inpR[i].disabled=false;
  20.     if(oBut.value=='lock' && inpR[i].type=='text')inpR[i].disabled=true;
  21.   } if(oBut.value=='ed'){oBut.value='lock'}else{oBut.value='ed'}
  22. }
  23. function send(oForm)
  24. { var inpF = oForm.getElementsByTagName('input');
  25.   for(var i=0;i<inpF.length;i++)
  26.   { inpF[i].disabled=false;
  27.   } oForm.submit();
  28. }
  29. </script>
  30. </HEAD>
  31. <BODY><form method="post" action="./fuj.php">
  32. <table><tbody><tr><td><input type="text" name="row[txt1][]"></td><td><input type="text" name="row[txt2][]"></td><td><input type="button" value="add" onClick="(this.value=='add')?add( this.parentNode.parentNode ):ed(this) "></td><td><input type="button" value="del" onClick="this.parentNode.parentNode.parentNode.deleteRow( this.parentNode.parentNode.rowIndex )" disabled="true"></td></tr></tbody></table>
  33. <br><input type="button" value="send" onClick="send(this.form)">
  34. </form><br>
  35. <?php print_r($_POST["row"])?>
  36. </BODY>
  37. </HTML>
Save the page as the fuj.php and it shows you what you had input before send (if you have PHP module enabled on your server, of course).
See you after some hours :-)

Bravo Maan... exactly wht i looking for... but still there are few validation tht i want in it.... Can u guide me little bit...!!!
i will be thankful to u...!!!
Validation are like this-
1) At least one row and only one row should be Fillled before adding a new row..!!!Value must be integers..!!
2)At the bottom of table there are two textboxes which total the amount of textboxes in Table..!!
3)When Edit button is pressed then add button should be hide...until the row is updated...!!!
4) After update and delete total amount should be update..
Last edited by nish123; Jun 30th, 2009 at 12:43 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2009
Posts: 49
Reputation: sysel is an unknown quantity at this point 
Solved Threads: 3
sysel sysel is offline Offline
Light Poster

Re: Add/Remove rows from Table

 
0
  #9
Jun 30th, 2009
Hi, it could be very useful, if you first wrote a simple HTML skeleton of the page even free of the scripts and features, but with the fully unique named items and/or with id. Than it could be much more simple to explain, what is the goal of the programming the features.

Here you are the page, and try to use it not for simple copy/pasting but for learning.

As I do not use MSIE I definitely cannot find out why Exploder does not show it.
Reply With Quote Quick reply to this message  
•
•
Join Date: Apr 2009
Posts: 83
Reputation: nish123 is an unknown quantity at this point 
Solved Threads: 0
nish123's Avatar
nish123 nish123 is offline Offline
Junior Poster in Training

Re: Add/Remove rows from Table

 
0
  #10
Jul 1st, 2009
•
•
•
•
Originally Posted by sysel View Post
Hi, it could be very useful, if you first wrote a simple HTML skeleton of the page even free of the scripts and features, but with the fully unique named items and/or with id. Than it could be much more simple to explain, what is the goal of the programming the features.

Here you are the page, and try to use it not for simple copy/pasting but for learning.

As I do not use MSIE I definitely cannot find out why Exploder does not show it.
tht was almost the perfect function....!!!! Thank u so much..!!
but sir i said only one text box from a row should be filled not both the fields...!!!
and there is one more field in which i m using dropdown and data coming from database...!!
another flaws i found tht when i edit a row..add button got disable and new lock button came in place of edit....but instead of edit if i delete the row... Add button still remain disable...!!!! i hpoe u got my point
but still its a gr8 function.....!!!!!
This javascript function i used for my work but it has lot of flaws..!!
javascript Syntax (Toggle Plain Text) 
  1.  function addRowToTable() 
  2. {    
  3.    // alert(document.getElementById('tblSample').getElementsByTagName('tr').length);
  4.   var tbl = document.getElementById('tblSample');
  5.   var lastRow = tbl.rows.length;
  6.   // if there's noheader row in the table, then iteration = lastRow + 1
  7.   var iteration = lastRow;     
  8.   var iteration1 = parseInt(lastRow+1);  
  9.  
  10.   alert(iteration1);
  11.   //Validate for empty check 
  12. //  var iteration = parseFloat(iteration-1); 
  13.  
  14.   for(var i=3;i<=iteration1;i++)  
  15.   { 
  16.     if($('debit'+i)!=null)
  17.     {                  
  18.         if($('debit'+i).value.trim() == '' && $('credit'+i).value.trim() != '')
  19.         {    
  20.             $('debit'+i).readOnly = true;
  21.             $('credit'+i).readOnly = true;
  22.             $('dledger'+i).disabled = true;
  23.         }
  24.         else if($('credit'+i).value.trim() == '' && $('debit'+i).value.trim() != '')
  25.         { 
  26.             $('credit'+i).readOnly = true;     
  27.             $('debit'+i).readOnly = true;     
  28.             $('dledger'+i).disabled = true;
  29.         }
  30.     }
  31.   }   
  32.   var debitTotal = 0;
  33.   var creditTotal = 0;          
  34.  
  35.    if($('debit'+iteration).value.trim() == '' && $('credit'+iteration).value.trim() == '')
  36.     {
  37.         alert('Please enter debit/credit value');
  38.         return false;
  39.     }
  40.   if($('debit'+iteration).value != '' && $('credit'+iteration).value != '')
  41.   {
  42.     alert('Please enter only debit/credit value');
  43.     return false;
  44.   } 
  45.   for(var i=3;i<=iteration1;i++)
  46.   {  
  47.     if($('debit'+i).value != ''){
  48.         debitTotal = parseFloat(debitTotal) + parseFloat($('debit'+i).value);
  49.     }
  50.     if($('credit'+i).value != ''){
  51.         creditTotal = parseFloat(creditTotal) + parseFloat($('credit'+i).value);
  52.     }
  53.   }        
  54.   $('tdebit').value = debitTotal;
  55.   $('tcredit').value = creditTotal;                    
  56.   document.getElementById('counter').value=iteration-3;
  57.   var row = tbl.insertRow(lastRow);
  58.   row.id = 'tr_'+iteration1;
  59.   // left cell 
  60. // cellRightSel.appendChild(sel); 
  61.   // right cell
  62.  
  63.  
  64.   var cellRightSel = row.insertCell(0); 
  65.   var sel = document.createElement('select');
  66.   sel.id ='dledger' + iteration1;
  67.   sel.name ='dledger' + iteration1;
  68.   cellRightSel.align = 'center';
  69.   sel.style.width = 125; 
  70.   //sel.size = 100;
  71.   <? 
  72.     $userid = $_SESSION['userid'];
  73.     $sql="SELECT * from 0_ledger where group_id not in(1,7) and user_id = $userid";
  74.     $result=mysql_query($sql)or die('Query error:'.''.mysql_errno());   
  75.     $counter=0; 
  76.     while($row=mysql_fetch_array($result))
  77.         {?>
  78.         sel.options[<?= $counter; ?>] = new Option('<?= $row['ledgerName']?>', '<?=$row['ledger_id']?>');
  79.         <? $counter = $counter + 1;  
  80.     }?>  
  81.   cellRightSel.appendChild(sel); 
  82.  
  83.   var cellRight = row.insertCell(1);
  84.   cellRight.align = 'center';
  85.   var el = document.createElement('input');
  86.   el.type = 'text';
  87.   el.name = 'debit' + iteration1;
  88.   el.id = 'debit' + iteration1;
  89.   el.size = 20; 
  90.   el.maxLength = 8;
  91.   cellRight.appendChild(el);
  92.  
  93.  /* var cellRightSel = row.insertCell(2);
  94.   var sel = document.createElement('select');
  95.   sel.name = 'selRow' + iteration;
  96.   sel.options[0] = new Option('text zero', 'value0');
  97.   sel.options[1] = new Option('text one', 'value1');
  98.   cellRightSel.appendChild(sel);  */ 
  99.  
  100.     var cellRight2 = row.insertCell(2);
  101.     cellRight2.align='center';
  102.     var el2 = document.createElement('input');
  103.     el2.type = 'text';
  104.     el2.name = 'credit' + iteration1;
  105.     el2.id = 'credit' + iteration1;
  106.     el2.size = 20;
  107.     el2.maxLength = 8; 
  108.  
  109.     cellRight2.appendChild(el2);  
  110.  
  111.      var cellLeft = row.insertCell(3);
  112.      cellLeft.align = 'center';   
  113.      cellLeft.id  = 'td'+iteration1;
  114.     var chbk1 = document.createElement('span');
  115.      chbk1.id = 'change'+iteration1;
  116.     var chbk = document.createElement('input');
  117.     chbk.type = 'button';
  118.     chbk.name = 'additem'+iteration1;
  119.  
  120.     chbk.id = 'additem'+iteration1;
  121.     chbk.className = 'ajaxsubmit';
  122.     chbk.value = 'Add Item';
  123.     //chbk.disabled = true; 
  124.     //.onClick = function(){addRowToTable();};
  125.     chbk.onclick = function(){addRowToTable1();change();};
  126.     //chbk.setAttribute('onClick','addRowToTable1();change()');
  127.     cellLeft.appendChild(chbk1);   
  128.     cellLeft.appendChild(chbk);  
  129.  
  130.  
  131. }
Last edited by nish123; Jul 1st, 2009 at 4:06 am.
Reply With Quote Quick reply to this message  
Reply
1 2 Last »

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxexample ajaxjspservlets array beta box browser captchaformproblem cart child class close codes column css date debugger decimal dependent design disablefirebug dom download editor element embed engine enter error events explorer ext file firefox focus form forms frameworks getselection google gwt gxt hiddenvalue highlightedword hint html htmlform ie7 ie8 iframe index java javascript javascripthelp2020 jquery jsf jsp jump libcurl listbox maps masterpage math media menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent paypal pdf php player position post problem programming prototype redirect safari scale scriptlets scroll search security select software toggle unicode variables w3c web window windowofwords \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC