AJAX

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

•

Join Date: Sep 2008

Posts: 2

Reputation: meerantj is an unknown quantity at this point

Solved Threads: 0

meerantj

Offline

Newbie Poster

adding,removing dynamic tables and validation

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

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: adding,removing dynamic tables and validation

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!

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<title><!--Sample--></title>
<html>
<head>
<title><!--Sample--></title>

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
<style type="text/css">
<!--
table { width: 100%; margin-bottom: 4px; border: 1px solid #C0C0C0;  text-align: center;  color: #C0C0C0; }
table td { background-color: #444444; border: 1px solid #C0C0C0 }
form input[type="button"] { background-color: #000000; color: #C0C0C0; border: none;
}
-->
</style>
<style type="text/css">
<!--
table { width: 100%; margin-bottom: 4px; border: 1px solid #C0C0C0;  text-align: center;  color: #C0C0C0; }
table td { background-color: #444444; border: 1px solid #C0C0C0 }
form input[type="button"] { background-color: #000000; color: #C0C0C0; border: none;
}
-->
</style>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!--
var num = /^[0-9]{1}$/;
window.onload = function() 
{  
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!'); } 
 };
}
 
function makeATable()
{ var n = 1;
  counter = parseInt( document.form1.txt1.value );
  var tcounter = document.getElementsByTagName('table');
 m = tcounter.length + 1;
if ( m >= 9 || counter == 0 ) { return false; } 
  div = document.getElementsByTagName('div');
do
{ 
 var table = document.createElement('table');
 
for ( var i = 0; i <= n; i++ ) {  var tr = document.createElement('tr'); 
for ( var j = 0; j <= n; j++ ) {
var td = document.createElement('td');
var celtxt = document.createTextNode('Table ' + ( n * m ) + '  Row ' + ( i+1 ) + ' Column ' + ( j+1 ) );
 
  td.appendChild( celtxt ); 
  tr.appendChild( td ); }  
table.appendChild( tr ); }
  div[0].appendChild( table );
n++; }
while( n <= counter );
form1.btn1.onclick = function() { for ( var x = 0; x < tcounter.length; x++ ) { div[0].removeChild(tcounter[x])   }
 };
}
 
//-->
</script>
<script type="text/javascript">
<!--
var num = /^[0-9]{1}$/;
window.onload = function() 
{  
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!'); } 
 };
}

function makeATable()
{ var n = 1;
  counter = parseInt( document.form1.txt1.value );
  var tcounter = document.getElementsByTagName('table');
 m = tcounter.length + 1;
if ( m >= 9 || counter == 0 ) { return false; } 
  div = document.getElementsByTagName('div');
do
{ 
 var table = document.createElement('table');
 
for ( var i = 0; i <= n; i++ ) {  var tr = document.createElement('tr'); 
for ( var j = 0; j <= n; j++ ) {
var td = document.createElement('td');
var celtxt = document.createTextNode('Table ' + ( n * m ) + '  Row ' + ( i+1 ) + ' Column ' + ( j+1 ) );

  td.appendChild( celtxt ); 
  tr.appendChild( td ); }  
table.appendChild( tr ); }
  div[0].appendChild( table );
n++; }
while( n <= counter );
form1.btn1.onclick = function() { for ( var x = 0; x < tcounter.length; x++ ) { div[0].removeChild(tcounter[x])   }
 };
}

//-->
</script>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</head>
<body>
 
<form name="form1" action="#" onsubmit="return false;">
<label>How many table &nbsp;<input type="text" name="txt1" size="3" value="0" />&nbsp;?</label><br /><br />
<div></div><br />
<input type="button" value="Create" name="btn0"  onclick="makeATable();" />&nbsp;<input type="button" name="btn1" value="Remove" />
</form>
</body>
</html>
</head>
<body>

<form name="form1" action="#" onsubmit="return false;">
<label>How many table &nbsp;<input type="text" name="txt1" size="3" value="0" />&nbsp;?</label><br /><br />
<div></div><br />
<input type="button" value="Create" name="btn0"  onclick="makeATable();" />&nbsp;<input type="button" name="btn1" value="Remove" />
</form>
</body>
</html>

•

Join Date: Sep 2008

Posts: 2

Reputation: meerantj is an unknown quantity at this point

Solved Threads: 0

meerantj

Offline

Newbie Poster

Re: adding,removing dynamic tables and validation

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

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: adding,removing dynamic tables and validation

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.

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: adding,removing dynamic tables and validation

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!

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
<html>
<head>
<title><!--Sample--></title>
<html>
<head>
<title><!--Sample--></title>

 Help with Code Tags 
 css Syntax (Toggle Plain Text) 
<style type="text/css">
<!--
table { width: 100%; margin-bottom: 4px; border: 1px solid#C0C0C0; text-align: center; color: # C0C0C0; }
table td { background-color: #444444; border: 1px solid #C0C0C0 }
form input[type="button"] { background-color: # 000000; color: #C0C0C0; border: none;
}
-->
</style>
<style type="text/css">
<!--
table { width: 100%; margin-bottom: 4px; border: 1px solid#C0C0C0; text-align: center; color: # C0C0C0; }
table td { background-color: #444444; border: 1px solid #C0C0C0 }
form input[type="button"] { background-color: # 000000; color: #C0C0C0; border: none;
}
-->
</style>

 Help with Code Tags 
 javascript Syntax (Toggle Plain Text) 
<script type="text/javascript">
<!--
var num = /^[0-9]{1}$/;
 
function makeATable()
{ 
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!');
} 
};
 
form1.btn0.onclick = function() 
{
var n = 1;
 
counter = parseInt(document.form1.txt1.value );
 
var tcounter = document.getElementsByTagName('table');
 
m = tcounter.length + 1;
 
if ( m >= 9 || counter == 0 ) { return false;
} 
 
div = '';
 
if ( document.all && !document.getElementById && !document.layers ) { div = document.all.div1;
}
 
else if (document.getElementById && !document.layers ) { div = document.getElementById('div1');
}
 
 
do
{ 
var table = document.createElement('table');
 
for ( var i = 0; i <= n; i++ ) { vartr = document.createElement('tr');
for ( var j = 0; j <= n; j++ ) {
var td = document.createElement('td');
var celtxt = document.createTextNode('Table ' + ( n * m ) + ' Row ' + ( i+1 ) + ' Column ' + ( j+1 ) );
 
td.appendChild( celtxt );
tr.appendChild( td ); } 
table.appendChild( tr ); }
div.appendChild( table );
n++; }
while( n <= counter );
 
form1.btn1.onclick = function() { 
var x = tcounter.length;
do {
div.removeChild(tcounter[x]);
x--;} while( x != -1 )
};
}
}
if ( window.addEventListener && !document.all )
window.addEventListener('load', makeATable, false )
 
else if ( window.attachEvent || document.all )
window.attachEvent('onload', makeATable)
 
else if (document.getElementById )
window.onload = makeATable;
 
//-->
</script>
<script type="text/javascript">
<!--
var num = /^[0-9]{1}$/;

function makeATable()
{ 
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!');
} 
};

form1.btn0.onclick = function() 
{
var n = 1;

counter = parseInt(document.form1.txt1.value );

var tcounter = document.getElementsByTagName('table');

m = tcounter.length + 1;

if ( m >= 9 || counter == 0 ) { return false;
} 

div = '';

if ( document.all && !document.getElementById && !document.layers ) { div = document.all.div1;
}

else if (document.getElementById && !document.layers ) { div = document.getElementById('div1');
}


do
{ 
var table = document.createElement('table');

for ( var i = 0; i <= n; i++ ) { vartr = document.createElement('tr');
for ( var j = 0; j <= n; j++ ) {
var td = document.createElement('td');
var celtxt = document.createTextNode('Table ' + ( n * m ) + ' Row ' + ( i+1 ) + ' Column ' + ( j+1 ) );

td.appendChild( celtxt );
tr.appendChild( td ); } 
table.appendChild( tr ); }
div.appendChild( table );
n++; }
while( n <= counter );

form1.btn1.onclick = function() { 
var x = tcounter.length;
do {
div.removeChild(tcounter[x]);
x--;} while( x != -1 )
};
}
}
if ( window.addEventListener && !document.all )
window.addEventListener('load', makeATable, false )

else if ( window.attachEvent || document.all )
window.attachEvent('onload', makeATable)

else if (document.getElementById )
window.onload = makeATable;

//-->
</script>

 Help with Code Tags 
 html Syntax (Toggle Plain Text) 
</head>
<body>
 
<form name="form1" action="#" onsubmit="return false;">
<span id="ask">How many table?</span> &nbsp;<input type="text" name="txt1" size="3" value="0" /><br /><br />
<div id="div1"></div><br />
<input type="button" value="Create" name="btn0" />&nbsp;<input type="button" name="btn1" value="Remove" />
</form>
</body>
</html>
</head>
<body>

<form name="form1" action="#" onsubmit="return false;">
<span id="ask">How many table?</span> &nbsp;<input type="text" name="txt1" size="3" value="0" /><br /><br />
<div id="div1"></div><br />
<input type="button" value="Create" name="btn0" />&nbsp;<input type="button" name="btn1" value="Remove" />
</form>
</body>
</html>

Last edited by essential; Sep 27th, 2008 at 4:19 am.

•

Join Date: Jun 2006

Posts: 7,609

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 464

~s.o.s~

Offline

Failure as a human

Re: adding,removing dynamic tables and validation

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.

Quick Reply to Thread

Show Printable Version

Other Threads in the JavaScript / DHTML / AJAX Forum

Previous Thread: Help
Next Thread: Actionscript syntax

Thread Tools	Search this Thread
Show Printable Version Email this Page

DaniWeb Message

Cancel Changes