By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,963 Members | 1,902 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,963 IT Pros & Developers. It's quick & easy.

How do i increase the rows in the table which has a delete option on each row

P: 6
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. table,td
  6. {
  7. border:1px solid #393;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12.  
  13. <p>Click the buttons to create and delete row(s) for the table.</p>
  14.  
  15. <table id="myTable">
  16. <tr>
  17. <td>No</td>
  18. <td>Description</td>
  19. <td>Unit Price</td>
  20. <td>Quantity</td>
  21. <td>Amount</td>
  22. <td>Delete row</td>
  23. </tr>
  24.  
  25. <tr>
  26. <td><input type="text" size = "2" name="no" placeholder="  No" ></td>
  27. <td><input type="text"   name="description" placeholder="  Description" ></td>
  28. <td><input type="text"   name="unit_price" placeholder="  Unit Price" ></td>
  29. <td><input type="text"   name="quantity" placeholder="  Qty" ></td>
  30. <td><input type="text"   name="amount" placeholder="  Amount" ></td>
  31. <td><input type="button" value="Delete" onclick="deleteRow(this)"></td>
  32. </tr>
  33. </table><p>
  34.  
  35. <hr></hr>
  36.  
  37.  
  38.  
  39. <button onclick="myCreateFunction()">Create row</button> 
  40.  
  41.  
  42. <script>
  43. function myCreateFunction()
  44. {
  45. var table = document.getElementById("myTable"); 
  46.   {
  47.  
  48. var a = '';
  49. var b = '';
  50. var c = '';
  51. var d = '';
  52. var e = '';
  53.  for(var i = 1; i <= 1; i++)
  54.  {
  55.     a += '<input type="text"   name="no'+i+'" placeholder="  No'+i+'" >';
  56.     b += '<input type="text"   name="description'+i+'" placeholder="  Description'+i+'" >'; 
  57.     c += '<input type="text"   name="unit_price'+i+'" placeholder="  Unit Price'+i+'" >';
  58.     d += '<input type="text"   name="quantity'+i+'" placeholder="  Qty'+i+'" >';  
  59.     e += '<input type="text"   name="amount'+i+'" placeholder="  Amount'+i+'" >'; 
  60.     f += '<input type="button"  name = "delete '+i+'" value="Delete'+i+'" onclick="deleteRow(this)'+i+'">';
  61.     }
  62.  
  63.  
  64.  
  65.   var row = table.insertRow(-1);
  66.   var cell1 = row.insertCell(0);
  67.   var cell2 = row.insertCell(1);
  68.   var cell3 = row.insertCell(2);
  69.   var cell4 = row.insertCell(3);
  70.   var cell5 = row.insertCell(4);
  71.   var cell6 = row.insertCell(5);
  72.  
  73.  
  74.   cell1.innerHTML =  a;
  75.   cell2.innerHTML =  b;
  76.   cell3.innerHTML =  c;
  77.   cell4.innerHTML =  d;
  78.   cell5.innerHTML =  e;
  79.   cell6.innerHTML =  f;
  80.  
  81.   }
  82. }
  83.  
  84.  
  85. function deleteRow(r)
  86. {
  87. var x = r.parentNode.parentNode.rowIndex;
  88. document.getElementById("myTable").deleteRow(x);
  89. }
  90.  
  91. </script>
  92.  
  93.  
  94. </body>
  95. </html>
  96.  
  97. <table> 
  98.     <tr> 
  99.     <td><input type="text" onblur="calcTotal(this, 'tot')" /></td> 
  100.     <td><input type="text" onblur="calcTotal(this, 'tot1')" /></td> 
  101.     </tr> 
  102.     <tr>     
  103.     <td><input type="text" onblur="calcTotal(this, 'tot')" /></td> 
  104.     <td><input type="text" onblur="calcTotal(this, 'tot1')" /></td> 
  105.     </tr> 
  106.     <tr>     
  107.     <td><input type="text" onblur="calcTotal(this, 'tot')" /></td> 
  108.     <td><input type="text" onblur="calcTotal(this, 'tot1')" /></td>        
  109.     </tr> 
  110.     <tr>     
  111.     <td><input type="text" id="tot" /></td> 
  112.     <td><input id="tot1" type="text" /></td> 
  113.     </tr>    
  114.     </table>
Aug 1 '14 #1

✓ answered by Dormilich

why would you do that?

Share this Question
Share on Google+
10 Replies


Dormilich
Expert Mod 5K+
P: 8,639
why would you do that?
Aug 1 '14 #2

P: 6
i choose to do that because i want to create additional rows on the click of the button. Each row should have a delete button
Aug 1 '14 #3

Dormilich
Expert Mod 5K+
P: 8,639
so you want to know how to add rows? (your "description" is ambiguous in this regard)
Aug 1 '14 #4

P: 6
Pardon my ambiguity, I do want to add rows. Could you help me out
Aug 1 '14 #5

Dormilich
Expert Mod 5K+
P: 8,639
see line #65, that’s where you create a row. adapt that part and bind it to a click event.
Aug 1 '14 #6

P: 6
I have changed the value to a positive integer and it did not create any row. what do you mean by a click event? Thanks
Aug 1 '14 #7

Dormilich
Expert Mod 5K+
P: 8,639
when you hit a button a click event is emitted. and you need these events to react to them.
Aug 1 '14 #8

P: 6
Could you please edit the code so i could understand better. My javascript skills(rookie). Thanks
Aug 1 '14 #9

Dormilich
Expert Mod 5K+
P: 8,639
you wouldn’t understand a bit if I did that.

nevertheless, understanding events in JS is crucial since all user interaction depends on that.

http://www.smashingmagazine.com/2012...sponding-user/
Aug 1 '14 #10

P: 6
Thanks dude for you time
Aug 1 '14 #11

Post your reply

Sign in to post your reply or Sign up for a free account.