2

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

2 回答 2

3

您的代码中明显的问题是您声明了一个名为的数组signs，然后在您的 for 循环中尝试以SignNames. 您需要匹配变量名称。您还使用了一个tableCols从未声明和初始化的变量。我想这就是你要找的：

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

演示：http: //jsbin.com/IZUnoSu/1/edit

此外，您的数组初始化比必要的更复杂。您不需要使用new Array(12)创建包含 12 个元素的数组，只需声明一个空数组，signs = []然后开始添加即可。但即使这样也比你需要的更复杂，因为你可以在一个带有嵌套数组文字的语句中声明整个事情：

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"]
    ];
于 2013-11-06T06:00:35.490 回答
0

首先，我希望您像这样定义数据：

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

然后你可以写signs[0].name访问这个名字。这更容易阅读。

现在唯一需要解决的问题是替换SignNames为signs，因为那是数组的名称。

于 2013-11-06T06:05:10.463 回答