Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
div {
  display: inline-block;
  padding: 10px 15px;
  font-size: 2rem;
  border: 1px solid #ccc;
}
div.even {background-color: blue;}
div.odd {background-color: red;}
</style>
</head>
<body>

<script id="jsbin-javascript">
function create(rows, cols) {

  var evenCross = "<div class='even'>x</div>";
  var oddCross = "<div class='odd'>x</div>";
  var cross = "<div>o</div>";
  var rowBreak = "<br>";

  for ( r = 0; r < rows; r++ ) {

    for ( c = 0; c < cols; c++ ) {

      if ( r % 2 == 0 ) { // EVEN ROW
        c % 2 == 0 ? document.write(evenCross) : document.write(cross);
      } else { // ODD ROW
        c % 2 > 0 ? document.write(oddCross) : document.write(cross);
      }

    }
    document.write(rowBreak);

  }

}

create (5,10);
</script>


<script id="jsbin-source-css" type="text/css">div {
  display: inline-block;
  padding: 10px 15px;
  font-size: 2rem;
  border: 1px solid #ccc;
}
div.even {background-color: blue;}
div.odd {background-color: red;}</script>

<script id="jsbin-source-javascript" type="text/javascript">function create(rows, cols) {

  var evenCross = "<div class='even'>x</div>";
  var oddCross = "<div class='odd'>x</div>";
  var cross = "<div>o</div>";
  var rowBreak = "<br>";

  for ( r = 0; r < rows; r++ ) {

    for ( c = 0; c < cols; c++ ) {

      if ( r % 2 == 0 ) { // EVEN ROW
        c % 2 == 0 ? document.write(evenCross) : document.write(cross);
      } else { // ODD ROW
        c % 2 > 0 ? document.write(oddCross) : document.write(cross);
      }

    }
    document.write(rowBreak);

  }

}

create (5,10);</script></body>
</html>