adding,removing dynamic tables and validation

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

Join Date: Sep 2008
Posts: 2
Reputation: meerantj is an unknown quantity at this point 
Solved Threads: 0
meerantj meerantj is offline Offline
Newbie Poster

adding,removing dynamic tables and validation

 
0
  #1
Sep 24th, 2008
hi,
i am web design student
now i need to do my assignment.
thats i need to create multiple dynamic tables..
i not know how to put a table in looping(java script)
if i put in loop then how to do validation..
so i decide to use add and remove buttons..
but in that also i cant get that perfect.
please anyone help me..
make a sample file..

thanks
regards

meeran
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: adding,removing dynamic tables and validation

 
0
  #2
Sep 25th, 2008
Here you go!
As part of my demo i add up some functionality that will ask the user to input the numbers' of table that they wish to create! Hope this wil help you up... Good day!

  1. <html>
  2. <head>
  3. <title><!--Sample--></title>
  1. <style type="text/css">
  2. <!--
  3. table { width: 100%; margin-bottom: 4px; border: 1px solid #C0C0C0; text-align: center; color: #C0C0C0; }
  4. table td { background-color: #444444; border: 1px solid #C0C0C0 }
  5. form input[type="button"] { background-color: #000000; color: #C0C0C0; border: none;
  6. }
  7. -->
  8. </style>


  1. <script type="text/javascript">
  2. <!--
  3. var num = /^[0-9]{1}$/;
  4. window.onload = function()
  5. {
  6. form1.txt1.onchange = function() { if ( !num.test( form1.txt1.value )) { alert('Only numbers from 0-9 and maximum charter of 1, are allowed on this field!'); }
  7. };
  8. }
  9.  
  10. function makeATable()
  11. { var n = 1;
  12. counter = parseInt( document.form1.txt1.value );
  13. var tcounter = document.getElementsByTagName('table');
  14. m = tcounter.length + 1;
  15. if ( m >= 9 || counter == 0 ) { return false; }
  16. div = document.getElementsByTagName('div');
  17. do
  18. {
  19. var table = document.createElement('table');
  20.  
  21. for ( var i = 0; i <= n; i++ ) { var tr = document.createElement('tr');
  22. for ( var j = 0; j <= n; j++ ) {
  23. var td = document.createElement('td');
  24. var celtxt = document.createTextNode('Table ' + ( n * m ) + ' Row ' + ( i+1 ) + ' Column ' + ( j+1 ) );
  25.  
  26. td.appendChild( celtxt );
  27. tr.appendChild( td ); }
  28. table.appendChild( tr ); }
  29. div[0].appendChild( table );
  30. n++; }
  31. while( n <= counter );
  32. form1.btn1.onclick = function() { for ( var x = 0; x < tcounter.length; x++ ) { div[0].removeChild(tcounter[x]) }
  33. };
  34. }
  35.  
  36. //-->
  37. </script>
  1. </head>
  2. <body>
  3.  
  4. <form name="form1" action="#" onsubmit="return false;">
  5. <label>How many table &nbsp;<input type="text" name="txt1" size="3" value="0" />&nbsp;?</label><br /><br />
  6. <div></div><br />
  7. <input type="button" value="Create" name="btn0" onclick="makeATable();" />&nbsp;<input type="button" name="btn1" value="Remove" />
  8. </form>
  9. </body>
  10. </html>
Reply With Quote Quick reply to this message  
Join Date: Sep 2008
Posts: 2
Reputation: meerantj is an unknown quantity at this point 
Solved Threads: 0
meerantj meerantj is offline Offline
Newbie Poster

Re: adding,removing dynamic tables and validation

 
0
  #3
Sep 26th, 2008
hi essential
i try your code..
thanks for that...
but problem is thats not run in IE6..
also some difficult in remove the tables...
that tables r like forms.. i need to use text boxes.. radio buttons also there..
i need to get marks of a student and counting total,average and also rank in it
so please teach me..how to make user friendly validation in this code..

wait for your reply...

thanks
regards...

meeran
Reply With Quote Quick reply to this message  
Join Date: Jun 2006
Posts: 7,581
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 461
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: adding,removing dynamic tables and validation

 
0
  #4
Sep 27th, 2008
There are better ways of manipulating tables and table data. See the HTMLTable reference at MDC.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: adding,removing dynamic tables and validation

 
0
  #5
Sep 27th, 2008
Yes i believed that theres a better way to do this! But its up to you which pattern you wil take. And as much as possible i always want to provide examples' rather than giving reference or any guide related to the issue! And not to mention that i am only using nokia6600 with mobile browser opera 8.65version on editing and testing every code, so that's 1 part of the problem due to the browser capabilities. So hope you wil understand if sometimes my codes dont give precise results. Wel as we go back to
the issue, this code has been updated! And about ui validation am stil workin on it!


  1. <html>
  2. <head>
  3. <title><!--Sample--></title>

  1. <style type="text/css">
  2. <!--
  3. table { width: 100%; margin-bottom: 4px; border: 1px solid#C0C0C0; text-align: center; color: # C0C0C0; }
  4. table td { background-color: #444444; border: 1px solid #C0C0C0 }
  5. form input[type="button"] { background-color: # 000000; color: #C0C0C0; border: none;
  6. }
  7. -->
  8. </style>


  1. <script type="text/javascript">
  2. <!--
  3. var num = /^[0-9]{1}$/;
  4.  
  5. function makeATable()
  6. {
  7. form1.txt1.onchange = function(){ if ( !num.test( form1.txt1.value )) { alert('Only numbers from 0-9and maximum charter of 1, are allowed on this field!');
  8. }
  9. };
  10.  
  11. form1.btn0.onclick = function()
  12. {
  13. var n = 1;
  14.  
  15. counter = parseInt(document.form1.txt1.value );
  16.  
  17. var tcounter = document.getElementsByTagName('table');
  18.  
  19. m = tcounter.length + 1;
  20.  
  21. if ( m >= 9 || counter == 0 ) { return false;
  22. }
  23.  
  24. div = '';
  25.  
  26. if ( document.all && !document.getElementById && !document.layers ) { div = document.all.div1;
  27. }
  28.  
  29. else if (document.getElementById && !document.layers ) { div = document.getElementById('div1');
  30. }
  31.  
  32.  
  33. do
  34. {
  35. var table = document.createElement('table');
  36.  
  37. for ( var i = 0; i <= n; i++ ) { vartr = document.createElement('tr');
  38. for ( var j = 0; j <= n; j++ ) {
  39. var td = document.createElement('td');
  40. var celtxt = document.createTextNode('Table ' + ( n * m ) + ' Row ' + ( i+1 ) + ' Column ' + ( j+1 ) );
  41.  
  42. td.appendChild( celtxt );
  43. tr.appendChild( td ); }
  44. table.appendChild( tr ); }
  45. div.appendChild( table );
  46. n++; }
  47. while( n <= counter );
  48.  
  49. form1.btn1.onclick = function() {
  50. var x = tcounter.length;
  51. do {
  52. div.removeChild(tcounter[x]);
  53. x--;} while( x != -1 )
  54. };
  55. }
  56. }
  57. if ( window.addEventListener && !document.all )
  58. window.addEventListener('load', makeATable, false )
  59.  
  60. else if ( window.attachEvent || document.all )
  61. window.attachEvent('onload', makeATable)
  62.  
  63. else if (document.getElementById )
  64. window.onload = makeATable;
  65.  
  66. //-->
  67. </script>

  1. </head>
  2. <body>
  3.  
  4. <form name="form1" action="#" onsubmit="return false;">
  5. <span id="ask">How many table?</span> &nbsp;<input type="text" name="txt1" size="3" value="0" /><br /><br />
  6. <div id="div1"></div><br />
  7. <input type="button" value="Create" name="btn0" />&nbsp;<input type="button" name="btn1" value="Remove" />
  8. </form>
  9. </body>
  10. </html>
Last edited by essential; Sep 27th, 2008 at 4:19 am.
Reply With Quote Quick reply to this message  
Join Date: Jun 2006
Posts: 7,581
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 461
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: adding,removing dynamic tables and validation

 
0
  #6
Sep 27th, 2008
> But its up to you which pattern you will take

Even if you know there is a better method out there which doesn't end up reinventing the wheel?

> And as much as possible i always want to provide examples' rather than giving reference
> or any guide related to the issue!

Oh, so you prefer zombie feeding? BTDT. This way of helping not only makes the posters depend on ready solutions but also hinders their thinking process. Nowhere in the entire post the poster has made an attempt to solve the problem at hand but still has got hold of enough code.

IMO, helping out by churning code snippets is easy; forcing the poster to learn and think isn't. Let your answers create people who can pass along the knowledge rather than ready code.
I don't accept change; I don't deserve to live.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



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



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC