Generating number of rows based on user input

Page 1 of 1

4 Replies - 1030 Views - Last Post: 28 August 2012 - 04:40 AM

#1 izic  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 197
  • Joined: 15-January 09

Generating number of rows based on user input

Posted 27 August 2012 - 01:58 PM

Hi, I'm trying to have the user enter a number and then a certain amount of rows will be created based on that number. So if the user enters 4, there should be 4 elements going down. Each element should also have a number inside of it, 1 to 4 respectively. I know how to prompt the user for input but I'm not sure how to take this input and generate rows with numbers in them. Can anyone give me some hints or point me in the right direction?

My code so far:

<!DOCTYPE html>
<html>
<head> Isaac's First Javascript Page </head>
<body>

<p id="demo">This is a paragraph.</p>

<table id="table" cellspacing="0" border="1">
<tbody>
<tr><td>Number</td><td>Square Root</td><td>Sqaure</td>
</tr>
</tbody>

<script>
var row = prompt("Enter a number", " ");
</script>

<script>
var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
var row = document.createElement("tr")
var data1 = document.createElement("td")
data1.appendChild(document.createTextNode("Column1"))
var data2 = document.createElement("td")
data2.appendChild (document.createTextNode("Column2"))
row.appendChild(data1);
row.appendChild(data2);
tbody.appendChild(row);
</script>
</body>
</html>


Is This A Good Question/Topic? 0
  • +

Replies To: Generating number of rows based on user input

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: Generating number of rows based on user input

Posted 27 August 2012 - 02:21 PM

When dealing with tables: instead of manually creating the table elements with document.createElement, you can use the insertRow and insertCell functions. (See the links for examples.)

You'd get the row count from the user, turn it into a number using the parseInt function, make sure it's a valid number using the isNaN function, and then use a for loop to create the correct amount of rows.
Was This Post Helpful? 0
  • +
  • -

#3 izic  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 197
  • Joined: 15-January 09

Re: Generating number of rows based on user input

Posted 27 August 2012 - 08:24 PM

Got you, this is what I have so far. Can't seem to get the for loop going. But besides that, is everything good so far?


<!DOCTYPE html>
<html>
<head> Isaac's First Javascript Page </head>
<body>

<p id="demo">This is a paragraph.</p>

<script>
var row = prompt("Enter a number", " ");
</script>

<script>
var row = parseInt(string[, 2]);
</script>

<table id="NumTable">
<tr>
<td>Old top row</td>
</tr>
</table>
<script type="text/javascript">

  function addRow(NumTable)
  {

    // Get a reference to the table
    var tableRef = document.getElementById(NumTable);

    // Insert a row in the table at row index 0
    var newRow   = tableRef.insertRow(0);

    // Insert a cell in the row at index 0
    var newCell  = newRow.insertCell(0);

    // Append a text node to the cell
    var newText  = document.createTextNode('New top row')
    newCell.appendChild(newText);
  }

// Call addRow() with the ID of a table
addRow('NumTable');
</script>

ar table = document.getElementById("NumTable");
for (var i = 0, row; row = table.rows[i]; i++) {
   }  
}

</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3115
  • View blog
  • Posts: 4,675
  • Joined: 08-June 10

Re: Generating number of rows based on user input

Posted 27 August 2012 - 08:49 PM

No, not really. You seem to have just copied the definition and/or the examples from the MDN docs exactly. That won't work. - You need to read and understand what the code you are trying to copy into your page does.

The definition for parseInt(), as written in the MDN docs, is:
var intValue = parseInt(string[, radix]);

What they are trying to show you there is not how parseInt should look in your code, but how it should be used in your code. - This is explaining that the parseInt() function can take two parameters: First a "string" parameter, which is the numeric string to be converted; and and optional (but encouraged) "radix" parameter for the output number. - The [] brackets around the second parameter means that it's optional.

In typical use, you would just pass the string you want to convert as the first parameter, and 10 as the second parameter. (Assuming you want a decimal number.)


As for the insertRow code. Well, you just copied that exactly, even though it doesn't really fit what you are trying to do. That example was not meant to be used to generate the type of output you seem to want. It's meant to show how it can be used, but they expect you to alter it to fit your situation.


Lastly, after the insertRow code you copied, you've got your for loop code. There are three problems there: First, the code is outside <script> tags. All Javascript code must be inside script tags, or it's just read as part of the HTML page. Second, the var for the table variable is missing the "v". And third, the conditions for the for loop are off. You may want to reread that part of the for loop docs.
Was This Post Helpful? 0
  • +
  • -

#5 izic  Icon User is offline

  • D.I.C Head

Reputation: -2
  • View blog
  • Posts: 197
  • Joined: 15-January 09

Re: Generating number of rows based on user input

Posted 28 August 2012 - 04:40 AM

I was able to get a column and some rows based on the users input. I know what to add two more columns that find the square root and sqaures of each number in a column. Ex.

Number Sqaure Root Squared
1 1 1
2 1.414 4
3 1.732 9

Any hints on how to go about doing this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
            var row = new Number(window.prompt('Enter a number'));
            /*
             * Insert your own input data validation here
             */
            createTable();
            function createTable(){
                var str='';
                for(i=1; i <= row; i++){
                    str = i +  '<br />';
                    document.write(str);
                }
                 
                
            }
        </script>
    </head>
    <body>
    </body>
</html>

This post has been edited by izic: 28 August 2012 - 05:02 AM

Was This Post Helpful? 0
  • +
  • -
Page 1 of 1