title: How to change the Color of only one row in a table (HTML/JavaScript)
body: <p>I should make a table which the user will input its data.
  So we have <strong>Product Name</strong> and <strong>Price</strong> and <strong>Count</strong> as our columns.</p>
  
  <p>After this data is filled by the user the "<strong>Sum</strong>" column should be filled in <strong>automatically</strong> which is Price multiplied by Count.</p>
  
  <p>I have completed the program `til here.
  But I have problem with the continuation of the question:</p>
  
  <p>I should change the <strong>colour of the row</strong> which has <strong>highest sum</strong> to <strong>BLUE</strong>
  and change the <strong>colour of the row</strong> of the product which is the <strong>most expensive</strong> to <strong>RED</strong>.</p>
  
  <p>How can it be done? </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  &lt;style&gt;
  p{color:#F00};
  &lt;/style&gt;
  &lt;body&gt;
  &lt;p&gt; Please fill in the table and then click on "Submit Data": &lt;/p&gt;
  &lt;table bordercolor="#333366" border="5"&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;font style="background-color:#0F0"&gt; Name of Product &lt;/td&gt;
  &lt;td&gt; &lt;font style="background-color:#0F0"&gt; Price &lt;/td&gt;
  &lt;td&gt; &lt;font style="background-color:#0F0"&gt; Count &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;input type="text" id="textbox1"&gt; &lt;/td&gt;
  &lt;td&gt; &lt;input type="text" id="textbox2"&gt; &lt;/td&gt;
  &lt;td&gt; &lt;input type="text" id="textbox3"&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;input type="text" id="textbox4"&gt; &lt;/td&gt;
  &lt;td&gt; &lt;input type="text" id="textbox5"&gt; &lt;/td&gt;
  &lt;td&gt; &lt;input type="text" id="textbox6"&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt; &lt;input type="text" id="textbox7"&gt; &lt;/td&gt;
  &lt;td&gt; &lt;input type="text" id="textbox8"&gt; &lt;/td&gt;
  &lt;td&gt; &lt;input type="text" id="textbox9"&gt; &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;input type="button" value="Submit Data" id="Submit" onClick="Submit()"&gt;
  &lt;/body&gt;
  &lt;script&gt;
  function Submit()
  {   
  
  
      var a=new Array(
      (document.getElementById("textbox1").value),
      (document.getElementById("textbox2").value),
      (document.getElementById("textbox3").value),
      (document.getElementById("textbox4").value),
      (document.getElementById("textbox5").value),
      (document.getElementById("textbox6").value),
      (document.getElementById("textbox7").value),
      (document.getElementById("textbox8").value),
      (document.getElementById("textbox9").value)
      );
  
      document.write("&lt;table border='5' bordercolor='#333366'&gt;");
  
      var c=0;
      document.write("&lt;tr&gt;");
  
      document.write("&lt;td id='td1'&gt;");
      document.getElementById("td1").innerHTML="Name of Product";
      document.write("&lt;/td&gt;");
  
      document.write("&lt;td id='td2'&gt;");
      document.getElementById("td2").innerHTML="Price";
      document.write("&lt;/td&gt;");
  
      document.write("&lt;td id='td3'&gt;");
      document.getElementById("td3").innerHTML="Count";
      document.write("&lt;/td&gt;");
  
      document.write("&lt;td id='td4'&gt;");
      document.getElementById("td4").innerHTML="Sum";
      document.write("&lt;/td&gt;");
  
      document.write("&lt;/tr&gt;");
  
      for(i=0;i&lt;3;i++)
      {
          document.write("&lt;tr&gt;");
          for(j=0;j&lt;4;j++)
          {
              var sum=a[c-1] * a[c-2];
  
              if(j==3) {document.write("&lt;td&gt;" +sum+ "&lt;/td&gt;");}
  
              else
              {
                  document.write("&lt;td&gt;" +a[c]+ "&lt;/td&gt;");
                  c++;
              }
          }
          document.write("&lt;/tr&gt;");
      }
      document.write("&lt;/table&gt;");
  }
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>