DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)
-   JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)
-   -   adding,removing dynamic tables and validation (http://www.daniweb.com/forums/thread147548.html)

meerantj Sep 24th, 2008 5:33 pm
adding,removing dynamic tables and validation
 
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

essential Sep 25th, 2008 5:13 am
Re: adding,removing dynamic tables and validation
 
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! 

<html>

<head>

<title><!--Sample--></title>
<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>


<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>
</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>

meerantj Sep 26th, 2008 2:25 pm
Re: adding,removing dynamic tables and validation
 
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

~s.o.s~ Sep 27th, 2008 2:31 am
Re: adding,removing dynamic tables and validation
 
There are better ways of manipulating tables and table data. See the HTMLTable reference at MDC.

essential Sep 27th, 2008 3:57 am
Re: adding,removing dynamic tables and validation
 
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!


<html>

<head>

<title><!--Sample--></title>

<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>


<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>

</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>

~s.o.s~ Sep 27th, 2008 6:19 am
Re: adding,removing dynamic tables and validation
 
> 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.


All times are GMT -4. The time now is 8:50 pm.

Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2009 DaniWeb® LLC