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

Question

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

I wouldnt know, idnt know how to get jquery into my code not how to use it, i guess i should look into it then? — Ben Taylor
– Ben Taylor, Commented May 15, 2013 at 1:20

Karol · Accepted Answer · 2013-05-22 05:15:34Z

1

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!

edited May 22, 2013 at 5:15

answered May 15, 2013 at 6:54

Karol

8,09313 gold badges51 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ben Taylor Over a year ago

Wow! Thats perfect! I have been trying for ages to figure this out and this is done ingeniously! Thanks for the help! p.s. can't mark answer up as I only have 1 reputation!

Karol Over a year ago

@BenTaylor - that's ok - I took me only 15 mins - I'm glad I helped.

Ben Taylor Over a year ago

I have also recently come across the case where i need to move to a td next to the one clicked. As you know roughly what i would like to do and you programmed this, do i just ad on to the row value? and then do $(this) and so on? Or is there more to it? @Carlos

Karol Over a year ago

By 'next to' you mean left, right, top or bottom? or you want to be able to specify it, so you can go to each direction you want?

Ben Taylor Over a year ago

I would like to go right and left as well as up and down, however i figured if i know one i can do others, i would like to check the right one, then the right one after that and so on until i have checked four in that direction, hence the Connect Four game.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related