Help rewriting table code

**anonymous9** · Jan 29, 2012 13:54

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("");

Code:

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

**AussieJohn** · Jan 29, 2012 15:29

Originally Posted by anonymous9

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("");

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.

Code:

//will result in 1 less than you intend
for ( var r = 1; r < rows; ++r ) 

//will result in the right number of iterations.
for ( var r = 1; r <= rows; ++r )

Also make sure you understand the increment and decrement operators (i.e. ++r vs. r++)

**anonymous9** · Jan 29, 2012 15:55

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.

Code:

<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("\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>

**paul_wilkins** · Jan 29, 2012 17:47

After a number of simplifications we end up with the following:

HTML Code:

<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

Code javascript:

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!\n\n You can only enter a number between 1 and 12\n 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);
};

User Tag List

Thread: Help rewriting table code

Thread Tools

Display

Help rewriting table code

Bookmarks

Bookmarks

Posting Permissions