Creating table with javascript and add id and class to each td

Question

I'm trying to create a chess game in javascript. I created a chessboard and the next step is to add an id's and classes to created td's.

Here is the code:

<html>
    <head>
        <title> Play Chess! </title>
        <meta charset="utf-8">
        <link rel='stylesheet' href='css/styles.scss' type='text/css'/>
    </head>
    <body>
        <script>
            var table ='';
            var rows =8;
            var cols=8;
            for (var r = 0; r<rows;r++){
                table +='<tr>';
                    for(var c=0;c<cols;c++){
                        table+='<td>' +''+'</td>';
                    }
                table+='</tr>';
            }
            document.write("<table border=1>"+table+'</table>');
        </script>
    </body>
</html>

I know I can simply do this with html, but it's too much code and I belive there is other way to do this.

Why all the downvotes? Make a comment if you are going to downvote, please. — Pop-A-Stash
– Pop-A-Stash, Commented Aug 23, 2016 at 20:49

trincot · Accepted Answer · 2016-08-23 21:13:02Z

Here is a solution with plain JavaScript (no jQuery). Put the script just before the closing </body> tag. This does not use document.write which really is to be avoided. Instead the HTML has an empty table with an id attribute, which then is populated through script.

var rows =8;
var cols=8;
var table = document.getElementById('board');
for (var r = 0; r<rows; r++){
  var row = table.insertRow(-1);
  for (var c = 0; c<cols; c++){
    var cell = row.insertCell(-1);
    cell.setAttribute('id', 'abcdefgh'.charAt(c) + (rows-r));
    cell.setAttribute('class', 'cell ' + ((c+r) % 2 ? 'odd' : 'even'));
  }
}

table { 
    border-spacing: 0;
    border-collapse: collapse;
}
.cell { width: 20px; height: 20px; }
.odd { background-color: brown }
.even { background-color: pink }

<table id="board"></table>

As a bonus it has the chessboard altering colors, and the id values are running from a1 (bottom-left) to h8 (top-right)

TimoStaudinger · Accepted Answer · 2016-08-23 20:47:34Z

0

If you can solve this issue by coding the layout directly inside your HTML file, you should definitely do that instead of building it dynamically in JavaScript. This is hugely less error-prone.

That being said, solving this using jQuery is not too hard:

var sideLength = 8;

var table = $('<table>');
$('#root').append(table);

for (var i = 0; i < sideLength; i++) {
  var row = $('<tr>');
  table.append(row);

  for (var j = 0; j < sideLength; j++) {
    row.append($('<td>'));
  }
}

td {
  border: 1px black solid;
  width: 10px;
  height: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id='root'></div>

answered Aug 23, 2016 at 20:47

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

Collectives™ on Stack Overflow

Creating table with javascript and add id and class to each td

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related