<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .cell { float: left; height: 12px; width: 12px; border: #0000CD 1px solid; } #matrix{ width: 280px; } .red{ background: #FF0000; } </style> <script> function createMatrix() { var matrix = document.getElementById('matrix'); var n = 20 * 20; for (var i = 0; i < n; i++) { var div = document.createElement('div'); div.className = 'cell'; matrix.appendChild(div); } } function getCell(row, col) { var divs = document.querySelectorAll('.cell'); return divs[--row * 20 + --col] } function setCell(row, col, val) { getCell(row, col).classList[val ? 'add' : 'remove']('red') } window.onload = function() { createMatrix(); setCell(1, 1, true); } </script> </head> <body> <div id="matrix"></div> </body> </html>