title: How to change the background of a row of table in javascript?
body: <p>In the javascript code, I add rows dynamically to a table. For each call, another single row is added. Based on the length of the table how would I implement the .insideHTML to a cell color.
  Table is defined in the HTML as</p>
  
  <pre><code>    &lt;table id="myTableData"  border="1" cellpadding="2" width = "100%"&gt;
      &lt;tr bgcolor="#FF0000"&gt;
              &lt;th&gt;Delete&lt;/th&gt;
              &lt;th&gt;Word&lt;/th&gt;
              &lt;th&gt;Meaning&lt;/th&gt;
              &lt;th&gt;Date Added (dd/mm/yyyy)&lt;/th&gt;
       &lt;/tr&gt;
  
       &lt;/table&gt;
  </code></pre>
  
  <p>The javascript(.js) has the code to add a single row by:</p>
  
  <pre><code>var table = document.getElementById("myTableData");
  
  var row = table.insertRow(rowCount);
  
      row.insertCell(0).innerHTML= '&lt;input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)"&gt;';
      row.insertCell(1).innerHTML= "Hello";
      row.insertCell(2).innerHTML="World";
      row.insertCell(3).innerHTML=".";
  </code></pre>
  
  <p>My first attempt was to call the whole row by:</p>
  
  <p><code>row.style.backgroundColor = '0000FF';</code></p>
  
  <p>Another attempt was to use this outside of the .js file</p>
  
  <pre><code>var tableElements = document.getElementById("myTableData");
  for(var j = 0; j &lt; tableElements.length; j++)
  {
      var tableCells = tableElements[j] ;
  
      var rows = tableCells.getElementsByTagName("tr") ;
  
      rows.style.backgroundColor = "red";
  
  }
  </code></pre>