SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help rewriting table code

    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>

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by anonymous9 View Post
    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++)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Jan 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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);
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •