如何在表内创建一个二维数组？

我想创建一个Connect Four游戏表，我想通过设置一个二维7 * 6数组并将每个数组放在每个单元格内（如果有意义的话）。我是Javascript新手，对面向对象编程没有太多的知识。我试图给每个单元格一个xPosition和yPosition（坐标，也许这可能在他们的“id”中），以便游戏可以检查是否有蓝色或黄色的行或列。如何在表内创建一个二维数组？

代码到目前为止，粗糙的尝试：

function make() 
    { 
    var table = document.createElement("table"); 
    for (var i = 0; i < 6; i++) 
    { 
    var row = table.inserRow(); 
    for (var j = 0; j < 5; j++) 
    { 
    var cell = row.insertCell; 
    } 
    document.body.appendChild(table); 
    } 
    }

来源

2013-05-14 Ben Taylor

你可以使用jQuery吗？会更容易... – Karol 2013-05-14 07:46:09

我不知道，idnt知道如何让jquery进入我的代码而不是如何使用它，我想我应该看看它呢？ – 2013-05-15 01:20:58

用jQuery写一些非常快速的解决方案。我粘贴了整个html，所以你可以将它保存为html文件并在浏览器中打开。您可以单击单元格以查看坐标（从0开始）。

<html> 
    <head> 
     <title>GRID</title> 
     <style type="text/css"> 
      table tr td { width: 50px; height: 50px; background-color: silver; border: 1px solid black; } 
      table tr td.over { background-color: yellow; } 
      table tr td.active { background-color: red; } 
      .controls { padding: 20px; } 
     </style> 
    </head> 
    <body> 
     <div class="controls"> 
      <a href="javascript:void(0)" data-move="[-1, 0]">left</a> 
      <a href="javascript:void(0)" data-move="[0, -1]">top</a> 
      <a href="javascript:void(0)" data-move="[1, 0]">right</a> 
      <a href="javascript:void(0)" data-move="[0, 1]">bottom</a> 
      <a href="javascript:void(0)" data-move="[-1, -1]">topleft</a> 
      <a href="javascript:void(0)" data-move="[1, -1]">topright</a> 
      <a href="javascript:void(0)" data-move="[1, 1]">bottomright</a> 
      <a href="javascript:void(0)" data-move="[-1, 1]">bottomleft</a> 
     </div> 
     <table></table> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var rows = 6, 
       cols = 7; 

      for(var i = 0; i < rows; i++) { 
       $('table').append('<tr></tr>'); 
       for(var j = 0; j < cols; j++) { 
        $('table').find('tr').eq(i).append('<td></td>'); 
        $('table').find('tr').eq(i).find('td').eq(j).attr('data-row', i).attr('data-col', j); 
       } 
      } 

      $('table tr td').mouseover(function() { 
       $(this).addClass('over'); 
      }).mouseout(function() { 
       $(this).removeClass('over'); 
      }).click(function() { 
       $(this).addClass('active'); 
      }); 

      $(".controls a").click(function() { 
       var $active = $("table tr td.active"); 
       if($active.length > 0) { 
        var move = $.parseJSON($(this).attr('data-move')); 
        if(move.length >= 2) { 
         $active.each(function() { 
          var row = parseInt($(this).attr('data-row')) + move[1], 
           col = parseInt($(this).attr('data-col')) + move[0]; 
          if(col >= cols) col = cols - 1; 
          if(col < 0) col = 0; 
          if(row >= rows) row = rows - 1; 
          if(row < 0) row = 0; 
          $(this).removeClass('active'); 
          $('table tr').eq(row).find('td').eq(col).addClass('active'); 
         }); 
        } 
       } 
      }); 
     }); 
     </script> 
    </body> 
</html>

请注意，如果你改变rows和cols变量可以得出更大的网格。

我已将controls div与按钮相加，所以您可以玩指令。首先，您需要将元素标记为活动状态，并且您可以点击移动它们。

有一个错误（或我的观点），您可以标记多个字段并将它们一次全部移动。

这是开始的好基础！

来源

2013-05-15 06:54:12 Karol

哇！那很完美！我一直在努力弄清楚这一点，这是巧妙的！谢谢您的帮助！附：不能标记答案，因为我只有1个声望！ – 2013-05-15 08:47:59

@BenTaylor - 没关系 - 我只带了我15分钟 - 我很高兴我帮了忙。 – Karol 2013-05-15 23:35:05

我最近也遇到过这种情况，我需要移动到点击旁边的td。正如你大概知道我想要做什么，并且你编程了这个，我是否只是在行值上做广告？然后做$（this）等等？或者还有更多吗？ @Carlos – 2013-05-21 12:51:06

如何在表内创建一个二维数组？

回答

相关问题