Geek Answers Handbook

How to create an NxN board using JavaScript and jQuery

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

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

<tr> closes immediately with </tr> , same with <table> </table>
I tried replacing the append() method with appendTo() or add() , but that 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>
+7
javascript jquery html
source share
6 answers

This is because the jQuery append() method does not only support closing tags and tries to close tags if they were not closed in the param clause. To solve this problem, you need to assign the result of append() some variable, for example:

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

and then add the lines to this var:

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

Same thing with columns:

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

Using appendTo , you can get the newly created elements.

So your final code should look like this:

 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++; } } }
+7
source share

Others have given you why this is happening, but I thought I could give an example of how you could make better use of css and more recent use of content.

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

But the main idea is to determine the number of cells, and then write out a series of divs with a 20% float value. As a result, you have a chessboard with a cell data attribute.

HTML:

 <div id="game"> </div>

CSS

 .cell{ width:20%; float:left; text-align:center; } .odd{ background:#eee; }

JS (assuming you put 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 by one will continue to clean things up in the DOM. But you can create elements and then add elements to these elements using append and then use append to add this 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 do it, that’s all.

Another small note - the chessboards have 64 cells (8 x 8), but I left them at 25 because your example did this.

+1
source share

When you add a tag using jQuery, it does not work like adding text to an HTML string. Instead, it creates a dom element. Try something similar instead, notice the lack of closing tags, and td is added directly to the last tr:

 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 table").append("<tr>"); for(var col = 0; col < maxCol ; col++) { $("#board tr:last").append("<td>" + num + "</td>"); num++; } } }
0
source share

 $(function() { //on load var boardSize = 5; printBoard(boardSize); }); function printBoard(i_BoardSize) { var maxRow = parseInt(i_BoardSize), maxCol = maxRow; var $table = $("<table oncontextmenu='return false'></table>").appendTo($("#board")); for(var row = 1; row <= maxRow; row++) { var $row = $("<tr/>").appendTo($table); for(var col = 1; col <= maxCol; col++) { $row.append("<td>" + (row*col) + "</td>"); } } } 
 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; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <center><h3><font size="20" color="black"> Board Game</font></h3></center></p> <div> <div id="board"> <div class="cell"> </div> </div> </div>

Side note: you do not need to add end tags manually ...

0
source share

The error is here:

 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--) { #here $("#board").append("<tr>"); for(var col = 0; col < maxCol ; col++) { #here $("#board").append("<td>" + num + "</td>"); num++; } $("#board").append("</tr>"); } $("#board").append("</table>"); }

You add each element to #board instead of properly nesting them. try to save the created elements in variables and do nesting:

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

Reason: some browsers will immediately try to correct the incorrect HTML code, and in the middle of the execution the elements will be distorted upon insertion and will be well formed after you finish. in the middle - the execution of this function is not atomic - the code is distorted, and the browser tries to fix it by closing the tags that you add. To do this, you need to add elements by nesting - opening and closing tags for them in advance -

0
source share

It is simpler and cleaner if you are just learning JavaScript and working in the DOM.

 function makeBoardWithoutJQuery(xs, ys) { var table = document.createElement('table'); var tbody = document.createElement('tbody'); for (var y=0; y<ys; ++y) { var tr = document.createElement('tr'); for (var x=0; x<xs; ++x) { var td = document.createElement('td'); td.innerHTML = (y*xs) + x; tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); return table; }
0
source share

More articles:


All Articles