Multidimensional Array - creating a table

Question

I'm trying to create a table of all the zodiac symbols with their years underneath (12 columns, n rows, dates range from 1912 to 2013) using multidimensional arrays.

I have my code below and that's where I'm completely stuck.

My code:

<script>
    // declaring a 2D array
    var signs = new Array(12);
    for (var ndx = 0; ndx < 12; ndx++) {
        signs[ndx] = new Array(2);
    }

    // The names first
    signs[0][0] = "Rat";
    signs[1][0] = "Ox";
    signs[2][0] = "Tiger";
    signs[3][0] = "Rabbit";
    signs[4][0] = "Dragon";
    signs[5][0] = "Snake";
    signs[6][0] = "Horse";
    signs[7][0] = "Goat";
    signs[8][0] = "Monkey";
    signs[9][0] = "Rooster";
    signs[10][0] = "Dog";
    signs[11][0] = "Pig";

    // Next the image file names
    signs[0][1] = "rat.gif";
    signs[1][1] = "ox.gif";
    signs[2][1] = "tgr.gif";
    signs[3][1] = "rbt.png";
    signs[4][1] = "drgn.png";
    signs[5][1] = "snk.png";
    signs[6][1] = "hrs.gif";
    signs[7][1] = "gt.gif";
    signs[8][1] = "mnky.png";
    signs[9][1] = "rstr.gif";
    signs[10][1] = "dog.gif";
    signs[11][1] = "pig.gif";

    document.write("<h2>");
    document.write("</h2>");

    document.writeln("<table border= '0' width = '100%'>");
    document.writeln("<tr>");


    for (var i = 0; i < SignNames.length; i++) {
        document.writeln("<td>");
        document.writeln(SignNames[i] + "<br />");
        document.writeln("<img src='Images/" + SignImages[i] + "'/>");
        document.writeln("</td>");
    }
    document.writeln("</tr>");

    document.writeln("<tr>");
    for (var i = 1912; i <= new Date().getFullYear(); i++) {
        document.writeln("<td>" + i + "</td>");

        tableCols++;
        if (tableCols == 12) {
            tableCols = 0;
            document.writeln("</tr>");
        }
    }

    document.writeln("</table>");
</script>

How do I get the signs [0][01] etc to show up in table rows. I want the name and picture each in a top cell, with the years associated in the column below — user2923395
– user2923395, Commented Nov 6, 2013 at 5:45
It's been solved. Thanks to everybody who helped! (I'm new to learning Javascript and Java, so I'm easily confused and make lots of silly errors) — user2923395
– user2923395, Commented Nov 6, 2013 at 6:04

nnnnnn · Accepted Answer · 2013-11-06 06:00:35Z

3

The obvious problem in your code is that you declare an array called signs and then later in your for loop try to access it as SignNames. You need to match up the variable names. You're also using a variable tableCols that is never declared and initialised. I think this is what you're looking for:

document.writeln("<table border= '0' width = '100%'>");
document.writeln("<tr>");

for (var i = 0; i < signs.length; i++) {
    document.writeln("<td>");
    document.writeln(signs[i][0] + "<br />");
    document.writeln("<img src='Images/" + signs[i][1] + "'/>");
    document.writeln("</td>");
}
document.writeln("</tr>");

document.writeln("<tr>");
var tableCols = 0; // <---- this variable wasn't initialised in your code
for (var i = 1912, d = new Date().getFullYear(); i <= d; i++) {        
    document.writeln("<td>" + i + "</td>");
    if (++tableCols == 12) {
        tableCols = 0;
        document.writeln("</tr>");
    }
}
document.writeln("</table>");

Demo: http://jsbin.com/IZUnoSu/1/edit

Also your array initialisation is more complicated than necessary. You don't need to use new Array(12) to create an array with 12 elements, you can just declare an empty array with signs = [] and then start adding to it. But even that is more complicated than you need because you can declare the whole thing in a single statement with a nested array literal:

var signs = [
      ["Rat","rat.gif"],
      ["Ox","ox.gif"],
      ["Tiger","tgr.gif"],
      ["Rabbit","rbt.png"],
      ["Dragon","drgn.png"],
      ["Snake","snk.png"],
      ["Horse","hrs.gif"],
      ["Goat","gt.gif"],
      ["Monkey","mnky.png"],
      ["Rooster","rstr.gif"],
      ["Dog","dog.gif"],
      ["Pig","pig.gif"]
    ];

answered Nov 6, 2013 at 6:00

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2923395 Over a year ago

Wow, I'm not sure what I was doing with those names there. I see I wasn't terribly far off from completing it though. Thanks so much for the help!

nnnnnn Over a year ago

You're welcome. Note that if you open your browser's console (ctrl-shift-J in Chrome, or - from memory - ctrl-shift-K in FF) then JavaScript errors are reported for you and you would've seen Uncaught ReferenceError: SignNames is not defined.

Roland Illig · Accepted Answer · 2013-11-06 06:05:10Z

0

First, I'd prefer if you defined your data like this:

var signs = [
  { name: "rat", image: "rat.gif" },
  { name: "ox", image: "ox.gif" },
  ...
  { name: "pig", image: "pig.gif" } // note: no trailing comma here
};

Then you can write signs[0].name to access the name. That's easier to read.

Now the only thing left to fix is that you replace SignNames with signs, since that's the name of your array.

answered Nov 6, 2013 at 6:05

Roland Illig

41.9k12 gold badges92 silver badges127 bronze badges

Collectives™ on Stack Overflow

Multidimensional Array - creating a table

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related