Chess style drawing

Question

I would like to create a template, as in the figure, for rows i and columns j :

This code does not work for every case.

 var z = 0 for(var i = 0;i<s;i++) for(var j = 0;j<o;j++,z++) color = (z%2==1?"white":"gray"); 

You can play here.

Answer 1

Try this by adding together i and j instead of using the third variable:

 for (var i = 0; i < s; i++) for (var j = 0; j < o; j++) color = ( (i + j) % 2 == 1 ? "white" : "gray" ); 

Answer 2

Use this condition:

 color = (i + j) % 2 == 1 ? "white" : "gray"; 

Answer 3

Add x and y and get the module.

 // ... var table$ = $('<table>'); for(var y = 0; y < s ; y++) { var tr$ = $('<tr>'); for(var x = 0; x < o; x++) { var td$ = $('<td>').css({ width: p_w, height: p_h, 'background-color': getColor(x, y) }); tr$.append(td$); } table$.append(tr$); } // ... var Color = { GRAY: '#aaa', WHITE: '#fff' }; function getColor(x, y) { return (x + y) % 2 === 0 ? Color.WHITE: Color.GRAY; } 

Demo