Skip to content

Instantly share code, notes, and snippets.

@hughfdjackson
Forked from anonymous/gist:1700314
Created January 29, 2012 19:51
Show Gist options
  • Select an option

  • Save hughfdjackson/1700353 to your computer and use it in GitHub Desktop.

Select an option

Save hughfdjackson/1700353 to your computer and use it in GitHub Desktop.
joe972 - pastebin.com/9gBXuCUe
<html>
<head>
<script type="text/javascript">
function newTable(form)//begins function
{
var rows = Number(form.rows.value);//number function converts object values to their numbers
var cols = Number(form.columns.value);//number function converts object values to their numbers
var tbl = document.createElement("table");//createElement is defining container
var tableBody = document.createElement("tableBody");
tbl.className = "table";//asigning className class for css
if (rows < 13 && cols < 13) {//Keeps the rows and columns between 1 and 12
for ( var r = 1; r < rows; ++r )//for loop that builds rows
{
var row = document.createElement("tr");//Defining container
for ( var c = 1; c < cols; ++c )//for loop that builds columns
{
var col = document.createElement("td");//Defining container
col.innerHTML = "R"+r+",C"+c;//innerHTML adds inner content in each box
row.appendChild(col);//apendChild allows us to enter text inside container col
}
tableBody.appendChild(row);//allows us to enter text inside container row
}
tbl.appendChild(tableBody);//allows us to enter text in container tableBody
document.getElementById("columns").appendChild( tbl );//connects form input to container named table
}//end if statement\
else{
alert("\t\t\t\tError!\n\n You can only enter a number between 1 and 12\n \t\t\tPlease Try Again");//Displays if anything outside of 1-12 conditions is inputted.
}//end if
}//end function
</script>
<link href="part2.css" rel="stylesheet" type="text/css">
</head>
<body>
<form>
How many rows?
<input name="rows"/>
<br/>
How many columns?
<input name="columns"/>
<br/>
<input type="button" value="Create table" onClick="newTable(this.form);"/>
</form>
<div id="columns"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment