Ben Taylor Ben Taylor - 1 month ago 7
HTML Question

How to create a two-dimensional array within a table?

I would like to create a table for a Connect Four game, I would like to do this by setting a two-dimensional 7*6 array and put each array within each cell if that makes sense. I am new to Javascript and do not have lot of knowledge in object orientated programming. I am trying to give each cell a xPosition and yPosition (coordinates, perhaps this could be in their "id") so that the game can check if there is a row or column of Blue or yellow.

Code so far, rough attempt:

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

Answer

Some really quick solution written with jQuery. I pasted whole html, so you can save it out as html file and open in a browser. You can click on cells to see coordinates (0-based).

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

Notice that if you change rows and cols variables you can draw bigger grids.

I have added controls div with buttons so you can play with directions. First of all you need to mark element as active, and them you can click to move.

There is one bug (or feature in my opinion) that you can mark multiple fields and move them all at once.

It's good base to start with!