用二维数组 jQuery 填充表格

Posted 2023-05-09

【中文标题】用二维数组 jQuery 填充表格

【英文标题】：Populate table with 2D array jQuery

【发布时间】：2019-01-14 17:51:45

【问题描述】：

说明：

我有一个随机游走算法，它返回一个充满 0 和 1 的二维数组。使用这个算法，我可以生成一个随机地牢地图，现在我陷入了这个问题：如何填充一个 html 表这个 0 和 1 ？

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

我必须动态生成表格吗？

目标：

循环二维数组 根据此二维数组填充（或更好地生成？）表格

  function createArray(num, dimensions) 
    var array = [];
    for (var i = 0; i < dimensions; i++) 
      array.push([]);
      for (var j = 0; j < dimensions; j++) 
        array[i].push(num);
      
    
    return array;
  


  //lets create a randomly generated map for our dungeon crawler
function  createMap() 
    let dimensions = 32, // width and height of the map
      maxTunnels = 28, // max number of tunnels possible
      maxLength = 28, // max length each tunnel can have
      map = createArray(1, dimensions), // create a 2d array full of 1's
      currentRow = Math.floor(Math.random() * dimensions), // our current row - start at a random spot
      currentColumn = Math.floor(Math.random() * dimensions), // our current column - start at a random spot
      directions = [[-1, 0], [1, 0], [0, -1], [0, 1]], // array to get a random direction from (left,right,up,down)
      lastDirection = [], // save the last direction we went
      randomDirection; // next turn/direction - holds a value from directions

    // lets create some tunnels - while maxTunnels, dimentions, and maxLength  is greater than 0.
    while (maxTunnels && dimensions && maxLength) 

      // lets get a random direction - until it is a perpendicular to our lastDirection
      // if the last direction = left or right,
      // then our new direction has to be up or down,
      // and vice versa
      do 
         randomDirection = directions[Math.floor(Math.random() * directions.length)];
       while ((randomDirection[0] === -lastDirection[0] && randomDirection[1] === -lastDirection[1]) || (randomDirection[0] === lastDirection[0] && randomDirection[1] === lastDirection[1]));

      var randomLength = Math.ceil(Math.random() * maxLength), //length the next tunnel will be (max of maxLength)
        tunnelLength = 0; //current length of tunnel being created

        // lets loop until our tunnel is long enough or until we hit an edge
      while (tunnelLength < randomLength) 

        //break the loop if it is going out of the map
        if (((currentRow === 0) && (randomDirection[0] === -1)) ||
            ((currentColumn === 0) && (randomDirection[1] === -1)) ||
            ((currentRow === dimensions - 1) && (randomDirection[0] === 1)) ||
            ((currentColumn === dimensions - 1) && (randomDirection[1] === 1))) 
          break;
         else 
          map[currentRow][currentColumn] = 0; //set the value of the index in map to 0 (a tunnel, making it one longer)
          currentRow += randomDirection[0]; //add the value from randomDirection to row and col (-1, 0, or 1) to update our location
          currentColumn += randomDirection[1];
          tunnelLength++; //the tunnel is now one longer, so lets increment that variable
        
      

      if (tunnelLength)  // update our variables unless our last loop broke before we made any part of a tunnel
        lastDirection = randomDirection; //set lastDirection, so we can remember what way we went
        maxTunnels--; // we created a whole tunnel so lets decrement how many we have left to create
      
    
    return map; // all our tunnels have been created and our map is complete, so lets return it to our render()
  ;

我只能使用jQuery 或javascript。

如果有更好的解决方案而不是表格，我会很高兴听到。

【问题讨论】：

我必须动态生成表格吗？ 是的。除非你的二维数组总是固定大小，在这种情况下你可以静态定义表格，然后用生成的数据填充单元格。

表格可以有静态维度，没有必要（现在）有随机维度。我在算法中设置了 32 的维度。非常感谢您的评论，这是我在堆栈溢出中的第一个问题 :)

没什么复杂的...循环创建行...内部循环将单元格添加到每一行

【参考方案1】：

感谢您的 cmets，我在 5 天前找到了这个解决方案，但我忘记更新帖子了。所以我们在这里:)

function mapGenerate()
    var map=createMap();


        //loop the 2d array map and change the number with the appropriate img    
        for(var i = 0; i < map.length; i++) 
            var innerArrayLength = map[i].length;
            for(var j = 0; j<innerArrayLength; j++)
                //loop the nested arrays so i can change the 1 and the 0 with the appropriate img
                if(map[i][j] === 0)
                    map[i][j]="<img class=\"walkble\" src=\"mapTiles/floorResized.png\">"; //you can walk this part of the map
                else
                    map[i][j]="<img class=\"nonWalkble\"// you cannot walk this part of the map src=\"mapTiles/volcanoresize.png\">";
                    
                ;
            
            $("#tableGame").append("<tr><td>"+ map[i] + "</td></tr>") // here i print the elements of the array
          
    


mapGenerate();