title: Add id dynamically to each table cells
body: <p>I am trying to create a dynamic js table and I want to give id to each cell dynamically. I want to use those ids to use in different js event handlers. How it can be done? I have tried in different ways but none of them works!</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
      &lt;style&gt;
          #colors {
              float: right;
              width: 400px;
              height: 400px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script&gt;
          var d;
          var k = 0;
          function makeit() {
              var tbl = document.createElement("table");
              var atts = document.createAttribute("style");
              atts.value = "border:1px solid black;text-align:center;padding:2px;margin:3px 3px 3px 3px;";
              tbl.setAttributeNode(atts);
              for (i = 0; i &lt; 5; i++) {
                  var rows = tbl.insertRow(i);
  
                  for (j = 0; j &lt; 7; j++) {
                      d = rows.insertCell(j);
                      d.height = "50px";
                      d.width = "50px";
                      d.style.backgroundColor = "yellow";
                      d.addEventListener("click", function myfunc() { d.style.backgroundColor = "red"; });
  
  
                  }
              }
  
  
              document.body.appendChild(tbl);
          }
  
          window.onload = makeit;
      &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>