Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create board NxN using JavaScript and jQuery

I am trying to create board game (like chess board game) with JavaScript.

When I tried to do it this is what happened:
enter image description here

The <tr> got closed immediately with </tr>, same thing with <table> </table>
I tried to replace the append() method with appendTo() or add() but it didn't help

This is my JavaScript code:

var boardSize = 5;

$(function() { //on load
    printBoard(boardSize);
});

function printBoard(i_BoardSize) {
    var maxRow = parseInt(i_BoardSize);
    var maxCol = parseInt(i_BoardSize);
    var num = 1;

    $("#board").append("<table oncontextmenu=\"return false\">");
    for(var row = maxRow - 1; row >= 0 ; row--) { 
           $("#board").append("<tr>");
            for(var col = 0; col < maxCol ; col++) {
                $("#board").append("<td>" + num + "</td>");
                num++;
            }

            $("#board").append("</tr>");
       }
        $("#board").append("</table>");
}

CSS:

td {
    width: 32px;
    height: 32px;
    cursor: pointer;
    text-align: center;
    border: 2px solid blue;
}

.redborder {
    background-color: red;
    color: white;
}

.blueborder {
    background-color: blue;
    color: white;
}

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel='stylesheet' type='text/css' href='css/board.css' />
        <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="Scripts/board.js"></script>
    </head>
    <body>
        <p> <center><h3><font size="20" color="black"> Board Game</font></h3></center></p>
        <div>
            <div id="board">
                <div class="cell">
                </div>
            </div>
        </div>
    </body>
</html>
like image 745
E235 Avatar asked Sep 23 '14 16:09

E235


Video Answer


2 Answers

This happens because jQuery append() method not supporting only closing tags and trying to close tags if they wasn't closed in provided param. To solve this you need to assign your append() result to some variable, for example:

var myTable = $("<table oncontextmenu=\"return false\"></table>").appendTo("#board");

and then append your rows to this var:

var myRow = $("<tr></tr>").appendTo( myTable );

Same with columns:

myRow.append("<td>" + num + "</td>");

By using appendTo method you will be able to get newly created elements.

So your final code should look like:

var boardSize = 5;

$(function() { //on load
    printBoard(boardSize);
});

function printBoard(i_BoardSize) {
    var maxRow = parseInt(i_BoardSize);
    var maxCol = parseInt(i_BoardSize);
    var num = 1;

    var myTable = $("<table oncontextmenu=\"return false\"></table>").appendTo("#board");
    for (var row = maxRow - 1; row >= 0; row--) {
        var myRow = $("<tr></tr>").appendTo(myTable);
        for (var col = 0; col < maxCol; col++) {
            myRow.append("<td>" + num + "</td>");
            num++;
        }
    }
}
like image 162
antyrat Avatar answered Nov 06 '22 20:11

antyrat


The others have supplied you with why this is happening but I thought I might give an example of how you might make better use of css and more recent dom usage.

Fiddle: http://jsfiddle.net/np62shu6/1/

But the basic idea is to define the number of cells, then write out a series of divs that have a 20% float value. In the end you have a chess board with a cell data attribute.

HTML:

<div id="game">

</div>

CSS:

.cell{
    width:20%;
    float:left;
    text-align:center;
}

.odd{
 background:#eee;   
}

JS (assumed you place this in a load handler):

var cells = 25;
var cell;
var h;

for(var i = 1; i <= cells; i ++)
{
    cell = $('<div>').addClass('cell').attr('data-cell', i).text(i);
    if(i % 2 == 1)
        cell.addClass('odd');

    $('#game').append(cell);
}

h = $('.cell:last-of-type').width();
$('.cell').css({height: h, lineHeight: h + 'px'});

As others have said, append is a sequential method, so calling it one after the other will just keep dropping things in the DOM. But you can create elements, then add things to those elements using append, then use append to add that whole group to another...

My example does not show this. My example is just an alternative to what you wrote. I would not do it the way you are doing it is all.

Another slight side note - chess boards have 64 cells (8 x 8), but I left it at 25 because your example did this.

like image 39
Kai Qing Avatar answered Nov 06 '22 22:11

Kai Qing