使用二维数组填充Javascript表

Using a 2 dimensional array to populate a Javascript table

本文关键字：Javascript 填充 二维数组      更新时间：2023-09-26

我是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. 在您的方法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
        }
   }
}

一个交互式的JS提琴:https://jsfiddle.net/Ls76kk2a/2/

一个优化技巧:给你的表一个唯一的ID，像这样: 
var table = document.createElement("table");
table.id = "mySuperCoolTable";

那么你可以确保你得到正确的:

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

由于ID必须是唯一的，因此只返回一个(或不返回)表。

回复你的评论:

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

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]; 
        }
   }
}

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

相关文章：