title: How to add CSS class dynamically to table row on mouseover
body: <p>I am trying to highlight a row while I am on a specific row . I had to use onmouseover. </p>
  
  <p>But it is not happening for me.</p>
  
  <p>This is the table definition in cshtml.</p>
  
  <pre><code>                                &lt;table class="table"&gt;
                                      &lt;thead&gt;
                                          &lt;tr&gt;
                                              &lt;th class="severityCheck"&gt;&lt;input type="checkbox" value="" /&gt;&lt;/th&gt;
                                              &lt;th&gt;Customer Name&lt;/th&gt;
                                              &lt;th&gt;Site Name&lt;/th&gt;
  
                                              &lt;th&gt;&lt;/th&gt;
                                          &lt;/tr&gt;
                                      &lt;/thead&gt;
                                      &lt;tbody data-bind="foreach:CustomerList"&gt;
                                          &lt;tr onclick="removepage();" onmouseover="changeRowColor(this)"&gt;
  
                                              &lt;td&gt;
                                                  &lt;input class="checkbox" data-bind="attr: { Id: 'checkbox' + $data.Id },click:$parent.customerClick" type="checkbox"&gt;
  
                                              &lt;/td&gt;
                                              &lt;td class="col-md-4"&gt;
                                                  &lt;span class="name" data-bind="text:customerName" /&gt;
  
                                              &lt;/td&gt;
                                              &lt;td&gt;
                                                  &lt;span data-bind="text:siteName" /&gt;
                                              &lt;/td&gt;
  
                                          &lt;/tr&gt;
                                      &lt;/tbody&gt;
                                  &lt;/table&gt;
  </code></pre>
  
  <p>To highlight on mouseover , I wrote the changeRowColor as :</p>
  
  <pre><code>function changeRowColor(row) {
      row.addClass = 'active';
  
  }
  </code></pre>
  
  <p>But the class is not being reflected. But when I do </p>
  
  <pre><code>row.style.backgroundColor= 'red'; 
  </code></pre>
  
  <p>it's happening.</p>
  
  <p>What am I doing wrong ?</p>
  
  <p><strong>Also , I have to highlight the current row only when the mouse is on top of this and not highlight when mouse leaves.</strong></p>
  
  <p>How would I do that ?</p>