Log in

View Full Version : Dynamic table using user input. Please help!!


Mar
09-21-2004, 10:20 PM
I am very new to JavaScript and I need to create a dynamic HTML table using the values entered by the user, this is for a Lab.
Here is what I have so far and it does not work. I truly do not know what I am doing. Any help would be greatly appreciated.


</head>
<body>

<script type="text/javascript">


var border=document.lab3form.border.value
var cellspacing= document.lab3form.cellspacing.value
var numbercells= document.lab3form.numbercells.value



function createTable() {
if (lab3form.border.value < 0 || lab3form.border.value > 5 ) {

alert ("Enter a border value between 0 and 5");
return 0;
}
else {var border = lab3form.border.value;
}
if (lab3form.cellspacing.value < 3 || lab3form.cellspacing.value > 10 ) {
alert ("Enter a cellspacing value between 3 and 10");
return 0;
}

else { var cellspacing = lab3form.cellspacing.value;
}
if (lab3form.numbercells.value > 99 || lab3form.numbercells.value < 0 ){
alert ("Number of table cells must be a positive number less than 100");
return 0;
}
else {var numbercells = lab3form.numbercells.value;
}
document.write ("<table align=\"center\"border=\"" + border + "\" cellspacing=\'' "+ cellspacing + "\">");
document.write ("<tr>");
for ( x=1; x <= cells; x++ ){
document.write ("<td>" + x + "</td>");
if (x % 3 == 0 ){
document.write ("</tr><tr>");
}
}
document.write ("</tr></table>");} //end function createTable ()




</script>
<form name="lab3form" onsubmit="return createTable(this)" name="lab3form" enctype="text/plain" >

<p>Please enter the following table attributes:</p>

<p>Border:<input type="text" size="1" name="border" /></p>

<p>Cellspacing:<input type="text" size="2" name="cellspacing" /></p>

<p>Number of Cells:<input type="text" size="3" name="numbercells" /></p>

<p> <input type="submit" value="Submit Info" name="Submit" /></p>
</form>
<table>



</table>

</body>
</html> :confused:

Thank you for anything you may be able to help me with.
gigabites
09-22-2004, 12:01 AM
<script type="text/javascript">

var border=document.lab3form.border.value
var cellspacing= document.lab3form.cellspacing.value
var numbercells= document.lab3form.numbercells.value

function createTable() {
if (lab3form.border.value < 0 || lab3form.border.value > 5 )
{
alert ("Enter a border value between 0 and 5");
return 0;
}

else
var border = lab3form.border.value;

if (lab3form.cellspacing.value < 3 || lab3form.cellspacing.value > 10 )
{
alert ("Enter a cellspacing value between 3 and 10");
return 0;
}

else
var cellspacing = lab3form.cellspacing.value;

if (lab3form.numbercells.value > 99 || lab3form.numbercells.value < 0 )
{
alert ("Number of table cells must be a positive number less than 100");
return 0;
}
else
var numbercells = lab3form.numbercells.value;

document.write ("<table align=\"center\" border=\"" + border + "\" cellspacing=\""+ cellspacing + "\">");
document.write ("<tr>");
for ( x=1; x <= numbercells; x++ )
{
document.write ("<td>" + x + "</td>");
if (x % 3 == 0 )
document.write ("</tr><tr>");
}

document.write ("</tr></table>");} //end function createTable ()

</script>
Mar
09-23-2004, 02:02 PM
I found what was wrong, my var needs to be under the function.

Thanks anyway,
gigabites
09-23-2004, 03:40 PM
Oh, Ok.. U're welcome :)