如何循环数组并在动态创建的HTML表中插入数组的值？

Question

使用纯JavaScript和下面的数据集/数组，我正在尝试编写一个在HTML DIV中创建表的函数。放在DIV中的所有内容必须由Javascript生成。我不想将数组中的“CODE”值添加到表中，除非单击。该数组如下：

        var challenge_data = [];
        challenge_data[0] = [];
        challenge_data[0][0] = "CODE 1";
        challenge_data[0][1] = "DESCRIPTION 1";
        challenge_data[0][2] = "13256.45";
        challenge_data[1] = [];
        challenge_data[1][0] = "CODE 2";
        challenge_data[1][1] = "DESCRIPTION 2";
        challenge_data[1][2] = "244.78";
        challenge_data[2] = [];
        challenge_data[2][0] = "CODE 3";
        challenge_data[2][1] = "DESCRIPTION 3";
        challenge_data[2][2] = "1867.44";
        challenge_data[3] = [];
        challenge_data[3][0] = "CODE 4";
        challenge_data[3][1] = "DESCRIPTION 4";
        challenge_data[3][2] = "1455.55";

我的解决方案显然没有创造出我想要的相同内容：

         document.addEventListener("DOMContentLoaded", function(event) { 
        // get the reference for the body
          var body = document.getElementById("challenge_container_1");

          // creates a <table> element and a <tbody> element
          var tbl = document.createElement("table");
          var tbl1 = document.createElement("table");
          var tbl2 = document.createElement("table");
          var tbl3 = document.createElement("table");
          // var tblBody = document.createElement("tbody");

          // creating all cells
          for (var i = 0; i < 4; i++) {
            // creates a table row
            var row = document.createElement("tr");
            var row1 = document.createElement("tr");
            var row2 = document.createElement("tr");
            var row3 = document.createElement("tr");

            for (var j = 0; j < 2; j++) {
              // Create a <td> element and a text node, make the text
              // node the contents of the <td>, and put the <td> at
              // the end of the table row
              var cell = document.createElement("td");
              var cell1 = document.createElement("td1");
              var cell2 = document.createElement("td2");
              var cell3 = document.createElement("td3");
              var cell4 = document.createElement("td4");
              var cell5 = document.createElement("td5");
              var cell6 = document.createElement("td6");
              var cell7 = document.createElement("td7");

              var cellText = document.createTextNode(challenge_data[0][1]);
              var cellText1 = document.createTextNode(challenge_data[0][2]);
              var cellText2 = document.createTextNode(challenge_data[1][1]);
              var cellText3 = document.createTextNode(challenge_data[1][2]);
              var cellText4 = document.createTextNode(challenge_data[2][1]);
              var cellText5 = document.createTextNode(challenge_data[2][2]);
              var cellText6 = document.createTextNode(challenge_data[3][1]);
              var cellText7 = document.createTextNode(challenge_data[3][2]);

              cell.setAttribute("class", "tdclass" );
              cell1.setAttribute("class", "tdclass" );
              cell2.setAttribute("class", "tdclass" );
              cell3.setAttribute("class", "tdclass" );
              cell4.setAttribute("class", "tdclass" );
              cell5.setAttribute("class", "tdclass" );
              cell6.setAttribute("class", "tdclass" );
              cell7.setAttribute("class", "tdclass" );

              cell.appendChild(cellText);
              cell1.appendChild(cellText1);
              cell2.appendChild(cellText2);
              cell3.appendChild(cellText3);
              cell4.appendChild(cellText3);
              cell5.appendChild(cellText3);
              cell6.appendChild(cellText3);
              cell7.appendChild(cellText3);

              row.appendChild(cell, cell1);
              // row.appendChild(cell1);
              row1.appendChild(cell2, cell3);
              // row1.appendChild(cell3);
              row2.appendChild(cell4,cell5);
              // row2.appendChild(cell5);
              row3.appendChild(cell6, cell7);
              // row3.appendChild(cell7);

            }

            // add the row to the end of the table body
            // tblBody.appendChild(row, row1, row2, row3);
            row.setAttribute("class", "booclass" );
            row1.setAttribute("class", "booclass" );
            row2.setAttribute("class", "booclass" );
            row3.setAttribute("class", "booclass" );
          }

          // put the <tbody> in the <table>
          tbl.appendChild(row);
          tbl1.appendChild(row1);
          tbl2.appendChild(row2);
          tbl3.appendChild(row3);

          // appends <table> into <body>
          body.appendChild(tbl);
          body.appendChild(tbl1);
          body.appendChild(tbl2);
          body.appendChild(tbl3);
          // sets the border attribute of tbl to 2;
          tbl.setAttribute("class", "democlass" );
          tbl1.setAttribute("class", "democlass" );
          tbl2.setAttribute("class", "democlass" );
          tbl3.setAttribute("class", "democlass" );

        });