Javascript 如何在表中创建二维数组？_Javascript_Html_Arrays_For Loop_Html Table

Javascript 如何在表中创建二维数组？

javascript html arrays for-loop

Javascript 如何在表中创建二维数组？,javascript,html,arrays,for-loop,html-table,Javascript,Html,Arrays,For Loop,Html Table,我想为Connect Four游戏创建一个表，我想通过设置一个二维7*6数组来实现这一点，如果有意义的话，将每个数组放在每个单元格中。我是Javascript新手，对面向对象编程没有太多知识。我试图给每个单元格指定一个xPosition和yPosition（坐标，可能在它们的“id”中），以便游戏可以检查是否有蓝色或黄色的行或列迄今为止的代码，粗略尝试： function make() { var table = document.createElement("tabl

我想为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);
    }
    }

函数make（）
{
var table=document.createElement（“表”）；
对于（变量i=0；i<6；i++）
{
var行=table.inserRow（）；
对于（var j=0；j<5；j++）
{
var cell=row.insertCell；
}
document.body.appendChild（表）；
}
}

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


网格
表tr td{宽度：50px；高度：50px；背景色：银色；边框：1px纯黑；}
表tr td.over{背景色：黄色；}
表tr td.active{背景色：红色；}
.controls{padding:20px；}
$（文档）.ready（函数（）{
变量行=6，
cols=7；
对于（变量i=0；i0）{
var move=$.parseJSON（$（this.attr（'data-move'））；
如果（move.length>=2）{
$active.each（函数（）{
var row=parseInt（$（this）.attr（'data-row'））+move[1]，
col=parseInt（$（this.attr（'data-col'））+move[0]；
如果（col>=cols）col=cols-1；
如果（col<0）col=0；
如果（行>=行）行=行-1；
如果（行<0）行=0；
$（this.removeClass（'active'）；
$（'table tr'）.eq（row.find（'td'）.eq（col.addClass（'active'））；
});
}
}
});
});

请注意，如果更改

行

和

列

变量，则可以绘制更大的网格

我添加了带有按钮的

控件

div，这样你就可以玩方向了。首先，您需要将元素标记为活动的，并且您可以单击它们来移动它们

在我看来，有一个bug（或特性）可以标记多个字段并同时移动它们

这是一个很好的开始

你会使用jQuery吗？这会容易得多…我不知道，我不知道如何将jquery输入到我的代码中，而不是如何使用它，我想我应该看看它，然后呢？哇！太好了！多年来我一直在试图弄明白这一点，这是巧妙地做到了！谢谢你的帮助！p、因为我只有一个名声，所以美国不能给我的答案打分@BenTaylor-没关系-我只花了15分钟-我很高兴我帮了忙。我最近也遇到了这样一个情况，我需要换到一个td旁边的那个。正如你大致知道我想做什么，并且你编程了这个，我是否只需要添加行值？然后做$（这个）等等？还是还有更多@你是说左边、右边、上面还是下面？或者你想指定它，这样你就可以去你想去的每个方向？我想去右边和左边，以及上下，但是我想如果我知道一个我可以做其他的，我想检查右边的一个，然后是右边的一个，依此类推，直到我在那个方向检查了四个，因此连接四个游戏。

<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>