使用二维数组填充Javascript表

时间:2015-10-04 22:48:41

标签: javascript arrays

我是JavaScript的新手,并且仍在弄清楚事物的互动方式,所以如果这很明显,我会道歉。我最终试图创建一个滑动拼图,但目前我需要创建一个二维数组,用数值(1-8)填充我的网格。基本上我迄今为止所有的信息都来自互联网搜索,因为我的其他资源已被证明是无用的。

以下是我生成网格的代码:

function newPuzzle(r, c)
{
   var table = document.createElement("table");

   for (var i = 0; i < r; i++)
   {
      var row = document.createElement('tr');
      for (var j = 0; j < c; j++)
      {
         var column = document.createElement('td');

         if (i%2 == j%2)
         {
               column.className = "even";
         }
         else
         {
               column.className = "odd";
         }     
         row.appendChild(column);    
      }
      table.appendChild(row);
   }
   document.body.appendChild(table);

   populateTable();
}

最后我调用了populateTable()函数(我甚至不确定它会起作用),这里是代码:

function populateTable()
{

   var cell = new Array(_r);
   for (var i = 0; i < _r; i++)
   {
      cell[i] = new Array(_c);
   }

   for (var i = 0; i < cell.length; ++i)
   {
        var entry = cell[i];
        for (var j = 0; j < entry.length; ++j)
        {
            var gridTable = document.getElementByTagName("table");
            var _cells = gridTable.rows[i].cells[j].innerHTML = "2"; 
            //the 2 is just for testing
        }

   }
}

非常感谢任何见解。

1 个答案:

答案 0 :(得分:1)

当我运行它时,你的代码基本上有两个问题:

  1. 在您的方法populateTable()中,未定义变量_r_c,因此我将它们作为参数传递。

  2. 方法document.getElementByTagName不存在,它是复数document.getElementsByTagName,后者又返回所有<table>元素的数组,因此您必须选择哪一个function newPuzzle(r, c) { var table = document.createElement("table"); for (var i = 0; i < r; i++) { var row = document.createElement('tr'); for (var j = 0; j < c; j++) { var column = document.createElement('td'); if (i%2 == j%2) { column.className = "even"; } else { column.className = "odd"; } row.appendChild(column); } table.appendChild(row); } document.body.appendChild(table); // here we pass _r and _c as arguments populateTable(r,c); } function populateTable(_r,_c) { var cell = new Array(_r); for (var i = 0; i < _r; i++) { cell[i] = new Array(_c); } for (var i = 0; i < cell.length; ++i) { var entry = cell[i]; for (var j = 0; j < entry.length; ++j) { // getElementsByTagName returns an array of all table elements var gridTable = document.getElementsByTagName("table"); // we select the first table element with the array index [0] var _cells = gridTable[0].rows[i].cells[j].innerHTML = "2"; //the 2 is just for testing } } } 元素想要 - 我选择了第一个,因为我假设你的页面上只有一个表。

  3. 以下是更改:

    var table = document.createElement("table");
    table.id = "mySuperCoolTable";
    

    交互式JS小提琴:https://jsfiddle.net/Ls76kk2a/2/

    优化提示:为您的表格提供如下唯一ID:

    var gridTable = document.getElementById("mySuperCoolTable");
    

    然后你可以确定你得到了正确的:

    function populateTable(_r,_c)
    {
    
       var cell = new Array(_r);
       for (var i = 0; i < _r; i++)
       {
          cell[i] = new Array(_c);
          for (var j = 0; j < _c; j++) {
            cell[i][j] = i*_c + j;
          }
       }
    
       // fix the last one
       cell[_r-1][_c-1] = "X";
    
       for (var i = 0; i < cell.length; ++i)
       {
            var entry = cell[i];
            for (var j = 0; j < entry.length; ++j)
            {
                var gridTable = document.getElementsByTagName("table");
                var _cells = gridTable[0].rows[i].cells[j].innerHTML = cell[i][j]; 
            }
       }
    }
    

    这只返回一个(或没有)表,因为ID必须是唯一的。

    回复您的评论:

    以下是如何填充除最后一个元素之外的所有元素的示例:

    int getData(const char* fileContents, char* command)
    {
      char* chardata = strtok(NULL, " ");
      if (*command == 0) // if first data
        charData = strtok((char*) fileContents, " ");
      cout << charData << "\n"; // output
      *command = charData[0];
      return atoi(charData + 1);
    } // end getData
    

    这里是JS小提琴:https://jsfiddle.net/Ls76kk2a/3/