title: Apply different colors to Dynamically generated row of HTML table
body: <p>I've created dynamic table using HTML and javascript but rather than applying alternate color, I want to apply distinct color to each row. How can I do so?</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Dynamic Page&lt;/title&gt;
      &lt;/head&gt;
  
  
      &lt;body&gt;
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td&gt;Enter Rows&lt;/td&gt;
                  &lt;td&gt;&lt;input type="number" id="txtRows"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Enter Columns&lt;/td&gt;
                  &lt;td&gt;&lt;input type="number" id="txtCols"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;&lt;input type="button" id="btnDisplay" value="Display" onClick="createTable();"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
          &lt;table id="tbl_DynamicTable" border="1"&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  
      &lt;script type="text/javascript"&gt;
          function createTable()
          {
            debugger;
              var rows = document.getElementById("txtRows").value;
              var cols = document.getElementById("txtCols").value;
              var table = document.getElementById("tbl_DynamicTable");
              var str="";
              for(var i=0;i&lt;rows;i++)
              {
                  str += "&lt;tr id=row" + i +"&gt;";
  
                  //r = document.getElementById('tbl_DynamicTable').getElementsByTagName('&lt;tr&gt;');
                  //r.bgColor = colours[(i%k)/group | 0];
  
                  //mycurrent_row.style.backgroundColor = "#EEF4EA";
                  //mycurrent_row.style.backgroundColor =colours[(i%k)/group | 0];
  
                  for(var j=0;j&lt;cols;j++)
                  {
                      if(i==0)
                      {
                          str += "&lt;th&gt; Header " + j + "&lt;/th&gt;";
                      }
                      else
                      {
                          str += "&lt;td&gt; Row " + i + ", Cell "+ j + "&lt;/td&gt;";
                      }
                  }
                  str += "&lt;/tr&gt;";             
              }           
              table.innerHTML = str;
          }       
  
  
          $("tr").style("bgcolor","red");     
      &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I don't know how to use jQuery with HTML page. I'm new to this. So if possible please let me know what is needed to include in this too.</p>