JS Chess Board

index.html

<table>
  <tbody id="grid"></tbody>
</table>

js-chess-board.markdown

JS Chess Board

A Pen by cannandev on CodePen.

License.

script.js

var grid = document.getElementById('grid');
var size = 8;

for (var i=1; i <= size; i++) {
  var row = document.createElement('tr');
  for (var j=0; j < size; j++) {
    var cell = document.createElement('td');
    if ((i+j) % 2 !== 0) {
      row.appendChild(cell);
      cell.classList.add('odd');
    }
    else {
      row.appendChild(cell);
      cell.classList.add('even');      
    }
    grid.appendChild(row);
    row.id = 'row-' + i;
  }
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

table {
  border: 2px solid black;
  margin: 0 auto;
}

td {
  height: 50px;
  width: 50px;
  text-align: center;
  color: salmon;
}

.even {
  background-color: black;
}

.odd {
  background-color: ivory;
}