多維數組-創建表

Question

我正在嘗試使用多維數組創建一個所有生肖符號及其下年份（12列，n行，日期范圍為1912年至2013年）的表。

我下面有我的代碼，那是我完全卡住的地方。

我的代碼：

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

Answer 1

代碼中的明顯問題是，您聲明了一個稱為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"]
    ];

Answer 2

首先，如果您按如下方式定義數據，則更希望：

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 ，因為這是你的陣列的名稱。