...

View Full Version : Simple Function Help



SirSteve
02-26-2007, 08:36 PM
I am new to javascript and need help with a simple (to those that know what they are doing) function. I just need a function that takes the width and height and outputs a table with the width and height in relation to the table. An example would be something like:

function numbersignTable(5,5);

and the results would display:

#####
#####
#####
#####
#####

Can anyone help me with this?

brandonH
02-26-2007, 09:51 PM
by width and height do you mean columns and rows? if so, try this:





<html>


<head>
<title>dynamic tablemaker</title>

<script type=text/javascript>

function numbersignTable(Tcols,Trows){
var j='0';
var whattooutput='<table border=1 cellspacing=1>';
while(j<Tcols){
whattooutput+="<tr>";
for(i='0';i<Trows;i++){
whattooutput+="<td width=10 height=10>#</td>";
}
whattooutput+="</tr>";
j++;
}
whattooutput+="</table>";
document.getElementById('span1').innerHTML=whattooutput;
}

</script>

</head>


<body>


<span id=span1></span>
<input type=button onclick="numbersignTable('5','5');" value='clcik to create 5x5 table'>
</body>


</html>

SirSteve
02-27-2007, 03:41 AM
It's close.... instead of it outputing 0,0 and 0,1 and so on - I would like it to actually output the number sign, not an actual number.

Thanks for your help!

brandonH
02-27-2007, 04:23 AM
k, changed the code above to do what you want.

Arbitrator
02-27-2007, 07:34 AM
Inserting a table into a span element? O.o That code contains several HTML errors. Here’s an example with correct HTML that does a little bit more:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>CF 108450</title>

<style type="text/css">
* { margin: 0; }
html { padding: 1em; text-align: right; }
fieldset { width: 250px; }
label { display: block; margin: 0.2em 0; }
span.warning { display: block; color: red; text-align: center; font-weight: bold; }
table { margin: 1em 0 0; border: 1px solid; }
</style>

<script type="text/javascript">
function generateTable() {
var fieldset = document.getElementsByTagName("fieldset")[0];
var tableColumns = document.getElementById("tableColumns").value;
var tableRows = document.getElementById("tableRows").value;
if (!tableColumns || !tableRows || isNaN(tableColumns) || isNaN(tableRows) || (/^0$|-|\./).test(tableColumns) || (/^0$|-|\./).test(tableRows)) {
var warning = document.createElement("span");
warning.className = "warning";
warning.appendChild(document.createTextNode("Use positive integers only!"));
fieldset.appendChild(warning);
}
else {
for (var i = 0; i < fieldset.childNodes.length; i++) {
if (fieldset.childNodes[i].className && fieldset.childNodes[i].className == "warning") {
fieldset.removeChild(fieldset.childNodes[i]);
i--;
}
}
var table = document.createElement("table");
var tableRowBody = document.createElement("tbody");
for (var i = 0; i < tableRows; i++) {
var row = document.createElement("tr");
for (var j = 0; j < tableColumns; j++) {
var cell = document.createElement("td");
cell.appendChild(document.createTextNode("#"));
row.appendChild(cell);
}
tableRowBody.appendChild(row);
}
table.appendChild(tableRowBody);
document.body.appendChild(table);
}
}
</script>

</head>
<body>

<fieldset>
<legend>Table Generator</legend>
<label>Columns: <input id="tableColumns" type="text"></label>
<label>Rows: <input id="tableRows" type="text"></label>
<input type="button" id="generator" value="Generate Table" onclick="generateTable();">
</fieldset>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum