Can anyone show me how to rewrite this so that instead of using forms to input rows and columns. You enter the rows and columns using prompt(“”);
<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("\ \ \ \ Error!\
\
You can only enter a number between 1 and 12\
\ \ \ Please 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>
You can simply replace any form.[name].value to window.prompt(“Number of rows”);
Currently your code will also not generate the right amount of columns/rows as you are want the loop counter variable to be less than the number of rows, since you’re starting the loop counter at 1, this will always result in the # of rows/cols being 1 less than what was intended.
You can easily fix this by changing the comparison to less-than-or-equal
e.g.
//will result in 1 less than you intend
for ( var r = 1; [COLOR=#ff0000]r < rows[/COLOR]; ++r )
//will result in the right number of iterations.
for ( var r = 1; [COLOR=#006400]r <= rows[/COLOR]; ++r )
Also make sure you understand the increment and decrement operators (i.e. ++r vs. r++)
I replaces the form.[name].value with prompts and changed the for loop to “<=”. The prompts come up after you input the form data and if I delete form in the body then it doesnt work at all. And after I changed to <= the columns don’t appear correctly with the data I entered.
<html>
<head>
<script type="text/javascript">
function newTable(form)//begins function
{
var rows = prompt("Enter the number of rows");//number function converts object values to their numbers
var cols = prompt("Enter the number of columns");//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("\ \ \ \ Error!\
\
You can only enter a number between 1 and 12\
\ \ \ Please 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>
After a number of simplifications we end up with the following:
<html>
<head>
<link href="part2.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="button" value="Create table">
<div id="columns"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
function generateCells(rows, cols) {
var tableBody = document.createElement("tableBody"),
tr,
td,
row,
col;
for (row = 1; row <= rows; row += 1) {
tr = document.createElement("tr");
for (col = 1; col <= cols; col += 1) {
tr.appendChild(
document.createElement("td").appendChild(
document.createTextNode("R" + row + ",C" + col)
)
);
}
tableBody.appendChild(tr);
}
return tableBody;
}
function newTable(target) {
var rows = window.prompt("Enter the number of rows"),
cols = window.prompt("Enter the number of columns"),
table = document.createElement("table");
rows = parseInt(rows, 10);
cols = parseInt(cols, 10);
if (rows < 1 || cols < 1 || rows > 12 || cols > 12) {
window.alert("Error!\
\
You can only enter a number between 1 and 12\
Please Try Again");
return;
}
table.className = "table";
table.appendChild(generateCells(rows, cols));
target.appendChild(table);
}
document.getElementById('createTable').onclick = function () {
var target = document.getElementById("columns");
newTable(target);
};