title: How to change a cell's background color javascript
body: <p>The goal is to change the color of a cell when it is clicked. There is my js code below. As you can see I tried the <code>style.backgroundColor</code>, but only the right bottom cell changed it's color regardless the clicked cell.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var board = document.getElementById("tab"),
      lvl1 = {rows: 5, cols: 5};
  for(var i=0; i&lt;lvl1.rows; i++){
    var row=board.insertRow();
    for(var j=0; j&lt;lvl1.cols; j++) {
      var cell = row.insertCell();
    }       
  }
  board.onclick = function(e) {
    var cellIndex = e.target.cellIndex;
    var rowIndexx = e.target.parentNode.rowIndex;
    console.log(cellIndex + ".." + rowIndexx);
    cell.style.backgroundColor = "red";
  };</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table { margin: 0 auto; }
  td {
    height: 20px;
    width: 20px;
    border: 1px solid;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="tab"&gt;&lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>