943,809 Members | Top Members by Rank

Ad:
You are currently viewing page 1 of this multi-page discussion thread
Jun 30th, 2009
0

Add/Remove rows from Table

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
nish123 is offline Offline
83 posts
since Apr 2009
Jun 30th, 2009
0

Re: Add/Remove rows from Table

cool, so where is the code?
Reputation Points: 85
Solved Threads: 64
Practically a Master Poster
sillyboy is offline Offline
686 posts
since Mar 2007
Jun 30th, 2009
0

Re: Add/Remove rows from Table

yeah i m also asking for the code only..!!
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
nish123 is offline Offline
83 posts
since Apr 2009
Jun 30th, 2009
0

Re: Add/Remove rows from Table

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
Reputation Points: 17
Solved Threads: 6
Posting Pro in Training
ayesha789 is offline Offline
485 posts
since Jun 2009
Jun 30th, 2009
0

Re: Add/Remove rows from Table

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...!!!
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
nish123 is offline Offline
83 posts
since Apr 2009
Jun 30th, 2009
0

Re: Add/Remove rows from Table

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!
Reputation Points: 11
Solved Threads: 3
Light Poster
sysel is offline Offline
49 posts
since Jun 2009
Jun 30th, 2009
0

Re: Add/Remove rows from Table

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 :-)
Reputation Points: 11
Solved Threads: 3
Light Poster
sysel is offline Offline
49 posts
since Jun 2009
Jun 30th, 2009
0

Re: Add/Remove rows from Table

Click to Expand / Collapse  Quote originally posted by sysel ...
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.
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
nish123 is offline Offline
83 posts
since Apr 2009
Jun 30th, 2009
0

Re: Add/Remove rows from Table

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.
Reputation Points: 11
Solved Threads: 3
Light Poster
sysel is offline Offline
49 posts
since Jun 2009
Jul 1st, 2009
0

Re: Add/Remove rows from Table

Click to Expand / Collapse  Quote originally posted by sysel ...
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.
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
nish123 is offline Offline
83 posts
since Apr 2009

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: validation of Multiple forms in single page
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Enter text into newly created dynamic text box





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC