CODEWITHSUNDEEP
javascript
user3399884
user3399884

Reputation: 13

Beginning JavaScript - create table

I have to create an array using a for loop to produce the numbers 0-24. Then print these numbers in order in a 5x5 "table" using a for loop.

The output should be: 0 1 2 3 4 x 5 6 7 8 9 x 10 11 12 13 14 x... 20 21 22 23 24

I can't figure out how to create the table.

Here is my code:

// Calculate numbers 0-24
var numbers = [];
for (var 0; i < 25; i++) {
    numbers[i] = i;
}


// Create table
for (var row = 0; row < 4; row++) {
    document.write('<tr>');
    for (var col = 0; col < 4; col++) {
        document.write('<td>' + numbers + '</td>');
    }
    document.write('</tr>');
}

Upvotes: 0

Views: 196

Answers (3)

Jon P
Jon P

Reputation: 19772

This looks like a homework assignment so I'll make some suggestions instead of an out right answer.

Dont use document.write.

Create a table stub on the page using HTML and give it an ID. Find out how to get element by id. Find out how to update the inner html of that element. Only update the document once.

Use a tool like Firebug for Firefox or Developer tools for Chrome to inspect what is rendered to the page so you can work out what went wrong (or right).

Start your search for knowledge here: https://developer.mozilla.org/en-US/docs/Web/JavaScript

For an added bonus you may be able to do this without nested for loops with the help of the % operator

Upvotes: 3

surj
surj

Reputation: 4904

Supremely overkill, but maybe you will find these functions useful!

// creates an array that contains a sequence of numbers from 0 to size-1
function range(size) {
    size = Math.max(0, size);
    var result = [];
    while (size--) { result.unshift(size); }
    return result;
}

// splits an array into chunks of a certain size.
function chunk(array, size) {
    if (!array || !array.length || size < 1) { return array };
    return [array.slice(0, size)].concat(chunk(array.slice(size), size));
}

// takes a 2D array and converts it to an HTML table.
function createHTMLTable(table) {
    var html = table.map(function(row) {
        row = row.map(function(cell) { return "<td>"+ cell +"</td>"; });
        row = row.join('');
        return "<tr>"+ row +"</tr>";
    });
    html = html.join('');
    return "<table>"+ html +"</table>";
}

function renderHTML(html) {
    document.write(html);
}

var numbers   = range(25);
var table     = chunk(numbers, 5);
var tableHTML = createHTMLTable(table);

renderHTML(tableHTML);

Upvotes: 0

imtheman
imtheman

Reputation: 4843

The problem is that you are accessing the array without any index. Try this instead:

var numbers = [];
for ( var 0; i<25; i++)
{
   numbers[i]= i;
}


//Create table
var i = 0;
var table = "<table>";
for (var row=0; row<5; row++)    //Changed from 4 to 5
{
   table += "<tr>";
   for (var col=0; col<5; col++)    //Changed from 4 to 5
   {
      table += "<td>" + numbers[i] + "</td>";    //numbers to numbers[i]
      i++;
   }
   table += "</tr>";
}
table += "</table>";
document.write(table);

Update: Taking from what @Jon P answered I updated my answer to only write once.

Upvotes: 3

Related Questions